React Hooks by Abhushan

---

> The project is under development.

A collection of modern, server-safe custom React hooks to supercharge your React application development.

Find useful reusable abstractions for browser API's, custom utilities to manage states, create and cleanup subscription to external stores or in general encapsulate often repeated business logic.

Installation

To get started, you need to install the package. Use one of the following commands based on your package manage

``

bash

npm install @abhushanaj/react-hooks





Usage



$3



All hooks are named exports, so importing them is straightforward.

tsx

import { useDocumentTitle } from '@abhushanaj/react-hooks;





$3



You can also import multiple hooks at once.

tsx

import { useDocumentTitle, useToggle } from '@abhushanaj/react-hooks;





Example



Now that you’ve installed and imported the hooks, you can use them in your components.

jsx

import React from 'react';

import { useDocumentTitle } from '@abhushanaj/react-hooks';



function App() {

	const [count, setCount] = React.useState(0);

	useDocumentTitle(

Current count is: ${count}

, { resetOnUnmount: true });



	return (

		

			Update document title to show the latest count

			

		

	);

}





Documentation



Visit react-hooks.abhushan.dev for more information about the package.



List of Available Hooks



$3



1. useDocumentEventListener: Adds an event listener to the document object.



1. useDocumentTitle: Dynamically update the document title of a webpage.



1. useIsDocumentVisible: Tracks document visibility using the

document.visibilityState

 property.



$3



1. useCopyToClipboard: Copy text content to clipboard.



1. useNavigatorLanguage: Get the preferred language set by the user in browser settings.



1. useOnline: Detect the current online status of the browser.



$3



1. useOuterWindowSize: Get and track the dimensions of the outer window.



1. useWindowEventListener: Adds an event listener to the window object.



1. useWindowSize: Get and track the dimensions of the window from your component.



$3



1. useCounter: Manage a counter value with custom min, max and step properties.



1. useCycleOn: Cycle through a list of values.



1. useDefault: Sets a default value to a state when it is null or undefined.



1. useList: Manage a list of items.



1. usePrevious: Track the previous value of a variable.



1. useQueue: Manage a queue of items.



1. useStack: Manage a stack of items.



1. useStateWithHistory: Manage a state value with it's entire history of updates.



1. useToggle: Toogle a boolean value.



1. useUndoState: Manage a state value with ability to undo an update



$3



1. useEventListenerOnRef: Adds an event listener to a element through the ref object.



1. useLockBodyScroll: Lock the scroll of document body by setting the overflow property to hidden.



1. useMediaQuery: Match a media query against the document.



$3



1. useEffectOnlyOnceWhen: Runs a callback effect once when condition is met or is met in future.



1. useIsomorphicLayoutEffect: Hook that resolves to useEffect on the server and useLayoutEffect on the client.



1. useOnMount: Run a callback after a component mounts using the useOnMount hook.



1. useOnUnmount: Run a callback after a component unmounts using the useOnUnmount hook.



1. useOnUpdate: Runs a callback on every component update or re-render.



Timers



1. useInterval: Manage intervals conveniently using the useInterval hook.



1. useIntervalWhen: Manage intervals against a flag conveniently using the useIntervalWhen hook.



1. useTimeout: Manage timeouts conveniently using the useTimeout hook.



Utilities



1. useCustomEvent: Manage the entire lifecycle for a custom event.



1. useDebounce: Debounce a callback function over a wait (ms) period.



1. useDebouncedValue: Delay execution of a state update until a defined time period.



1. useDispatchCustomEvent: Dispatch a custom event with payload.



1. useFreshCallback: Returns the latest and fresh callback function.



1. useFreshRef: Returns a ref with the latest and fresh value passed to it.



1. useIsClient: Returns a boolean flag to mark if code in running on client side.



1. useLifecycleLogger: Log messages for different lifecycles of a component with additional data.



1. useLimitCallback: Limit invocations of a callback to at max period count.



1. useSampleCallback: Limits the invocation of a callback to every period samples.



1. useSubscribeToCustomEvent: Subscribe and manage lifecycle for a custom event.



1. useThrottle: Throttle a callback function over a duration(ms) period.



1. useWasSSR: Indicates whether the component was SSR'ed or not.



Project Structure



The project is a monorepo setup created from the

create-turbo

 CLI starter contains two main workspaces:



1.

www: the documentation site for the @abhushanaj/react-hooks

.

2.

react-hooks: the actual npm package for @abhushanaj/react-hooks

 which is shipped to npm registry.



Versioning using changeset



The versioning for the

@abhushanaj/react-hooks

 is managed using changeset CLI and adheres to semver at all times.



Only react-hooks package follows this versioning system.



Whenever a new change is made on the

react-hooks workspace a equivalent changeset is created using the pnpm changeset

 command. Any additional information for the changes can be added as well during changset creation.



All changesets are then merged into one release server using the

pnpm changeset version command and published to npm using pnpm changeset publish` command.

Learn more about changesets from official repo.

> Automating this through Github Actions, is planned in future after a major release is achieved.