usehooks-ts

<img src="https://github.com/juliencrn/usehooks-ts/blob/master/.github/screenshot.png" alt="usehooks-ts banner" align="center" /> <br /> <div align="center"> <h1>usehooks-ts</h1> <div>React hook library, ready to use, written in Typescript.</div> <br /> <!-- Badges -->

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

<!-- ALL-CONTRIBUTORS-BADGE:END --> <br /> <pre>npm i <a href="https://www.npmjs.com/package/usehooks-ts">usehooks-ts</a></pre> <br /> <div align="center"> _{Created by <a href="https://github.com/juliencrn">Julien Caron</a> and maintained with ❤️ by an amazing <a href="#contributors">team of developers</a>.} </div> </div> <br />

💫 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

<!-- HOOKS:START -->

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

<!-- HOOKS:END -->

💚 Backers

Big thanks go to all our backers! [Become a backer]

<!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/getsentry"><img src="https://avatars.githubusercontent.com/u/1396951?v=4" width="100px;" alt="Sentry"/><br />_{<b>Sentry</b>}</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/KATT"><img src="https://avatars.githubusercontent.com/u/459267?v=4" width="100px;" alt="KATT"/><br />_<b>KATT</b></a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/adhiravishankar"><img src="https://avatars.githubusercontent.com/u/3884741?v=4" width="100px;" alt="Adhi Ravishankar"/><br />_{<b>Adhi Ravishankar</b>}</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/great-work-told-is"><img src="https://avatars.githubusercontent.com/u/113922084?v=4" width="100px;" alt="great-work-told-is"/><br />_{<b>great-work-told-is</b>}</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end -->

✨ Contributors

Big thanks go to all our contributors! [Become a contributor]

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/juliencrn"><img src="https://avatars.githubusercontent.com/u/14028029?v=4?s=64" width="64px;" alt="Julien"/><br />_{<b>Julien</b>}</a><br /><a href="#content-juliencrn" title="Content">🖋</a> <a href="https://github.com/juliencrn/usehooks-ts/commits?author=juliencrn" title="Code">💻</a> <a href="#design-juliencrn" title="Design">🎨</a> <a href="#ideas-juliencrn" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/a777med"><img src="https://avatars.githubusercontent.com/u/15968280?v=4?s=64" width="64px;" alt="a777med"/><br />_{<b>a777med</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=a777med" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://datkira.com/"><img src="https://avatars.githubusercontent.com/u/53250212?v=4?s=64" width="64px;" alt="Nguyen Tien Dat"/><br />_{<b>Nguyen Tien Dat</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=datkira" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/elifer5000"><img src="https://avatars.githubusercontent.com/u/4311278?v=4?s=64" width="64px;" alt="Elias Cohenca"/><br />_{<b>Elias Cohenca</b>}</a><br /><a href="#content-elifer5000" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="http://joaov.com.br/"><img src="https://avatars.githubusercontent.com/u/17601527?v=4?s=64" width="64px;" alt="João Deroldo"/><br />_{<b>João Deroldo</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Ajoaoderoldo" title="Bug reports">🐛</a> <a href="https://github.com/juliencrn/usehooks-ts/commits?author=joaoderoldo" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/Nishit-Dua"><img src="https://avatars.githubusercontent.com/u/35453301?v=4?s=64" width="64px;" alt="Nishit"/><br />_{<b>Nishit</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=Nishit-Dua" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/jonkoops"><img src="https://avatars.githubusercontent.com/u/695720?v=4?s=64" width="64px;" alt="Jon Koops"/><br />_{<b>Jon Koops</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=jonkoops" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/LoneRifle"><img src="https://avatars.githubusercontent.com/u/10572368?v=4?s=64" width="64px;" alt="LoneRifle"/><br />_{<b>LoneRifle</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/commits?author=LoneRifle" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/vfonic"><img src="https://avatars.githubusercontent.com/u/67437?v=4?s=64" width="64px;" alt="Viktor"/><br />_{<b>Viktor</b>}</a><br /><a href="#ideas-vfonic" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Avfonic" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/bclermont"><img src="https://avatars.githubusercontent.com/u/474302?v=4?s=64" width="64px;" alt="Bruno Clermont"/><br />_{<b>Bruno Clermont</b>}</a><br /><a href="#question-bclermont" title="Answering Questions">💬</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/yoannesbourg"><img src="https://avatars.githubusercontent.com/u/73404603?v=4?s=64" width="64px;" alt="yoannesbourg"/><br />_{<b>yoannesbourg</b>}</a><br /><a href="#ideas-yoannesbourg" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/strange2x"><img src="https://avatars.githubusercontent.com/u/10759731?v=4?s=64" width="64px;" alt="Strange2x"/><br />_{<b>Strange2x</b>}</a><br /><a href="#ideas-strange2x" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/steinybot"><img src="https://avatars.githubusercontent.com/u/4659562?v=4?s=64" width="64px;" alt="Jason Pickens"/><br />_{<b>Jason Pickens</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Asteinybot" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="http://smackagency.com/"><img src="https://avatars.githubusercontent.com/u/3469560?v=4?s=64" width="64px;" alt="Sel-Vin Kuik"/><br />_{<b>Sel-Vin Kuik</b>}</a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aselvinkuik" title="Bug reports">🐛</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/isaacalves"><img