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

npm install @abhushanaj/react-hooks

Usage

Import a hook

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

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

Import multiple hooks.

You can also import multiple hooks at once.

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

Example

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

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 (
		<section>
			<h1>Update document title to show the latest count</h1>
			<button onClick={() => setCount((prev) => prev + 1)}>Increment Count: {count}</button>
		</section>
	);
}

Documentation

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

List of Available Hooks

DOM

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

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

3. useIsDocumentVisible: Tracks document visibility using the document.visibilityState property.

BOM

1. useCopyToClipboard: Copy text content to clipboard.

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

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

Window

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

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

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

State

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

2. useCycleOn: Cycle through a list of values.

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

4. useList: Manage a list of items.

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

6. useQueue: Manage a queue of items.

7. useStack: Manage a stack of items.

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

9. useToggle: Toogle a boolean value.

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

User Interface (UI)

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

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

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

Effects and Lifecycles

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

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

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

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

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

Timers

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

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

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

Utilities

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

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

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

4. useDispatchCustomEvent: Dispatch a custom event with payload.

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

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

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

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

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

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

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

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

13. 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.