@abhushanaj/react-hooks
v0.6.0
Published
A collection of modern and server safe custom React hooks to supercharge your React application development.
Downloads
14
Maintainers
Readme
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
useDocumentEventListener: Adds an event listener to the document object.
useDocumentTitle: Dynamically update the document title of a webpage.
useIsDocumentVisible: Tracks document visibility using the
document.visibilityState
property.
BOM
useCopyToClipboard: Copy text content to clipboard.
useNavigatorLanguage: Get the preferred language set by the user in browser settings.
useOnline: Detect the current online status of the browser.
Window
useOuterWindowSize: Get and track the dimensions of the outer window.
useWindowEventListener: Adds an event listener to the window object.
useWindowSize: Get and track the dimensions of the window from your component.
State
useCounter: Manage a counter value with custom min, max and step properties.
useCycleOn: Cycle through a list of values.
useDefault: Sets a default value to a state when it is null or undefined.
useList: Manage a list of items.
usePrevious: Track the previous value of a variable.
useQueue: Manage a queue of items.
useStack: Manage a stack of items.
useStateWithHistory: Manage a state value with it's entire history of updates.
useToggle: Toogle a boolean value.
useUndoState: Manage a state value with ability to undo an update
User Interface (UI)
useEventListenerOnRef: Adds an event listener to a element through the ref object.
useLockBodyScroll: Lock the scroll of document body by setting the overflow property to hidden.
useMediaQuery: Match a media query against the document.
Effects and Lifecycles
useEffectOnlyOnceWhen: Runs a callback effect once when condition is met or is met in future.
useIsomorphicLayoutEffect: Hook that resolves to useEffect on the server and useLayoutEffect on the client.
useOnMount: Run a callback after a component mounts using the useOnMount hook.
useOnUnmount: Run a callback after a component unmounts using the useOnUnmount hook.
useOnUpdate: Runs a callback on every component update or re-render.
Timers
useInterval: Manage intervals conveniently using the useInterval hook.
useIntervalWhen: Manage intervals against a flag conveniently using the useIntervalWhen hook.
useTimeout: Manage timeouts conveniently using the useTimeout hook.
Utilities
useCustomEvent: Manage the entire lifecycle for a custom event.
useDebounce: Debounce a callback function over a wait (ms) period.
useDebouncedValue: Delay execution of a state update until a defined time period.
useDispatchCustomEvent: Dispatch a custom event with payload.
useFreshCallback: Returns the latest and fresh callback function.
useFreshRef: Returns a ref with the latest and fresh value passed to it.
useIsClient: Returns a boolean flag to mark if code in running on client side.
useLifecycleLogger: Log messages for different lifecycles of a component with additional data.
useLimitCallback: Limit invocations of a callback to at max period count.
useSampleCallback: Limits the invocation of a callback to every period samples.
useSubscribeToCustomEvent: Subscribe and manage lifecycle for a custom event.
useThrottle: Throttle a callback function over a duration(ms) period.
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:
www
: the documentation site for the@abhushanaj/react-hooks
.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.