usehooks-ts
npm i usehooks-ts
π« Introduction
useHooks(π₯).ts is a React hooks library, written in Typescript and easy to use. It provides a set of hooks that enables you to build your React applications faster. The hooks are built upon the principles of DRY (Don't Repeat Yourself). There are hooks for most common use cases you might need.
The library is designed to be as minimal as possible. It is fully tree-shakable (using the ESM version), meaning that you only import the hooks you need, and the rest will be removed from your bundle making the cost of using this library negligible. Most hooks are extensively tested and are being used in production environments.
Usage example
import { useLocalStorage } from 'usehooks-ts'
function Component() {
const [value, setValue] = useLocalStorage('my-localStorage-key', 0)
// ...
}πͺ Available Hooks
useBooleanβ handles boolean state with useful utility functions.useClickAnyWhereβ handles click events anywhere on the document.useCopyToClipboardβ copies text to the clipboard using the Clipboard API.useCountdownβ manages countdown.useCounterβ manages a counter with increment, decrement, reset, and setCount functionalities.useDarkModeβ returns the current state of the dark mode.useDebounceCallbackβ creates a debounced version of a callback function.useDebounceValueβ returns a debounced version of the provided value, along with a function to update it.useDocumentTitleβ sets the document title.useEventCallbackβ creates a memoized event callback.useEventListenerβ attaches event listeners to DOM elements, the window, or media query lists.useHoverβ tracks whether a DOM element is being hovered over.useIntersectionObserverβ tracks the intersection of a DOM element with its containing element or the viewport using the Intersection Observer API.useIntervalβ creates an interval that invokes a callback function at a specified delay using the setInterval API.useIsClientβ determines if the code is running on the client side (in the browser).useIsMountedβ determines if the component is currently mounted.useIsomorphicLayoutEffectβ uses either useLayoutEffect or useEffect based on the environment (client-side or server-side).useLocalStorageβ uses the localStorage API to persist state across page reloads.useMapβ manages a key-value Map state with setter actions.useMediaQueryβ tracks the state of a media query using the Match Media API.useOnClickOutsideβ handles clicks outside a specified element.useReadLocalStorageβ reads a value from localStorage, closely related to useLocalStorage().useResizeObserverβ observes the size of an element using the ResizeObserver API.useScreenβ tracks the screen dimensions and properties.useScriptβ dynamically loads scripts and tracking their loading status.useScrollLockβ A custom hook that locks and unlocks scroll.useSessionStorageβ uses the sessionStorage API to persist state across page reloads.useStepβ manages and navigates between steps in a multi-step process.useTernaryDarkModeβ manages ternary (system, dark, light) dark mode with local storage support.useTimeoutβ handles timeouts in React components using the setTimeout API.useToggleβ manages a boolean toggle state in React components.useUnmountβ runs a cleanup function when the component is unmounted.useWindowSizeβ tracks the size of the window.
π Backers
Big thanks go to all our backers! [Become a backer]
 Sentry |
 KATT |
 Adhi Ravishankar |
 great-work-told-is |
β¨ Contributors
Big thanks go to all our contributors! [Become a contributor]
This project follows the all-contributors specification (emoji key). Contributions of any kind welcome!
π Donate
If you find this piece of software helpful, please consider a donation. Any amount is greatly appreciated.
BTC: bc1qwys40tnd0lxf9lr9l0t6xc63dpxyucj4x4nay0
ETH: 0x36a85155a8300754C56395D5af24553FB18915D6
π License
This project is MIT licensed.