usehooks-ts

React hook library, ready to use, written in Typescript.

[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code_of_conduct.md) ![NPM Downloads](https://img.shields.io/npm/dm/usehooks-ts) ![NPM Downloads](https://img.shields.io/npm/dt/usehooks-ts) [![License](https://badgen.net/badge/License/MIT/blue)](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts) ![npm](https://img.shields.io/npm/v/usehooks-ts) [![All Contributors](https://img.shields.io/badge/all_contributors-253-orange.svg?style=flat-square)](#contributors-)

npm i usehooks-ts

_{Created by Julien Caron and maintained with ❤️ by an amazing team of developers.}

## 💫 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 ```tsx import { useLocalStorage } from 'usehooks-ts' function Component() { const [value, setValue] = useLocalStorage('my-localStorage-key', 0) // ... } ``` ## 🪝 Available Hooks - [`useBoolean`](https://usehooks-ts.com/react-hook/use-boolean) — handles boolean state with useful utility functions. - [`useClickAnyWhere`](https://usehooks-ts.com/react-hook/use-click-any-where) — handles click events anywhere on the document. - [`useCopyToClipboard`](https://usehooks-ts.com/react-hook/use-copy-to-clipboard) — copies text to the clipboard using the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). - [`useCountdown`](https://usehooks-ts.com/react-hook/use-countdown) — manages countdown. - [`useCounter`](https://usehooks-ts.com/react-hook/use-counter) — manages a counter with increment, decrement, reset, and setCount functionalities. - [`useDarkMode`](https://usehooks-ts.com/react-hook/use-dark-mode) — returns the current state of the dark mode. - [`useDebounceCallback`](https://usehooks-ts.com/react-hook/use-debounce-callback) — creates a debounced version of a callback function. - [`useDebounceValue`](https://usehooks-ts.com/react-hook/use-debounce-value) — returns a debounced version of the provided value, along with a function to update it. - [`useDocumentTitle`](https://usehooks-ts.com/react-hook/use-document-title) — sets the document title. - [`useEventCallback`](https://usehooks-ts.com/react-hook/use-event-callback) — creates a memoized event callback. - [`useEventListener`](https://usehooks-ts.com/react-hook/use-event-listener) — attaches event listeners to DOM elements, the window, or media query lists. - [`useHover`](https://usehooks-ts.com/react-hook/use-hover) — tracks whether a DOM element is being hovered over. - [`useIntersectionObserver`](https://usehooks-ts.com/react-hook/use-intersection-observer) — tracks the intersection of a DOM element with its containing element or the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). - [`useInterval`](https://usehooks-ts.com/react-hook/use-interval) — creates an interval that invokes a callback function at a specified delay using the [setInterval API](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). - [`useIsClient`](https://usehooks-ts.com/react-hook/use-is-client) — determines if the code is running on the client side (in the browser). - [`useIsMounted`](https://usehooks-ts.com/react-hook/use-is-mounted) — determines if the component is currently mounted. - [`useIsomorphicLayoutEffect`](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect) — uses either useLayoutEffect or useEffect based on the environment (client-side or server-side). - [`useLocalStorage`](https://usehooks-ts.com/react-hook/use-local-storage) — uses the [localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist state across page reloads. - [`useMap`](https://usehooks-ts.com/react-hook/use-map) — manages a key-value [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) state with setter actions. - [`useMediaQuery`](https://usehooks-ts.com/react-hook/use-media-query) — tracks the state of a media query using the [Match Media API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). - [`useOnClickOutside`](https://usehooks-ts.com/react-hook/use-on-click-outside) — handles clicks outside a specified element. - [`useReadLocalStorage`](https://usehooks-ts.com/react-hook/use-read-local-storage) — reads a value from [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), closely related to [useLocalStorage()](https://usehooks-ts.com/react-hook/use-local-storage). - [`useResizeObserver`](https://usehooks-ts.com/react-hook/use-resize-observer) — observes the size of an element using the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). - [`useScreen`](https://usehooks-ts.com/react-hook/use-screen) — tracks the [screen](https://developer.mozilla.org/en-US/docs/Web/API/Window/screen) dimensions and properties. - [`useScript`](https://usehooks-ts.com/react-hook/use-script) — dynamically loads scripts and tracking their loading status. - [`useScrollLock`](https://usehooks-ts.com/react-hook/use-scroll-lock) — A custom hook that locks and unlocks scroll. - [`useSessionStorage`](https://usehooks-ts.com/react-hook/use-session-storage) — uses the [sessionStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) to persist state across page reloads. - [`useStep`](https://usehooks-ts.com/react-hook/use-step) — manages and navigates between steps in a multi-step process. - [`useTernaryDarkMode`](https://usehooks-ts.com/react-hook/use-ternary-dark-mode) — manages ternary (system, dark, light) dark mode with local storage support. - [`useTimeout`](https://usehooks-ts.com/react-hook/use-timeout) — handles timeouts in React components using the [setTimeout API](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). - [`useToggle`](https://usehooks-ts.com/react-hook/use-toggle) — manages a boolean toggle state in React components. - [`useUnmount`](https://usehooks-ts.com/react-hook/use-unmount) — runs a cleanup function when the component is unmounted. - [`useWindowSize`](https://usehooks-ts.com/react-hook/use-window-size) — tracks the size of the window. ## 💚 Backers Big thanks go to all our backers! [[Become a backer](https://github.com/sponsors/juliencrn)]

_Sentry

_KATT

_{Adhi Ravishankar}

_{great-work-told-is}

## ✨ Contributors Big thanks go to all our contributors! [[Become a contributor](https://github.com/juliencrn/usehooks-ts/blob/master/.github/CONTRIBUTING.md)]

_Julien 🖋 💻 🎨 🤔	_a777med 💻	_{Nguyen Tien Dat} 💻	_{Elias Cohenca} 🖋	_{João Deroldo} 🐛 💻	_Nishit 💻	_{Jon Koops} 💻
_LoneRifle 💻	_Viktor 🤔 🐛	_{Bruno Clermont} 💬	_yoannesbourg 🤔	_Strange2x 🤔	_{Jason Pickens} 🐛	_{Sel-Vin Kuik} 🐛
_isaac 🐛	_{Bruno RZN} 💻 👀	_{Nathan Manceaux-Panot} 💻 👀	_{Dien Vu} 🤔	_{Oleg Kusov} 🤔	_{Matthew Guy} 🤔	_andrewbihl 🐛
_lancepollard 🐛	_{Mukul Bansal} 🐛	_{Jean-Luc Mongrain sur la Brosse} 💻 🤔	_Nic 🖋	_{Dan Wood} 💻	_{jo wendenbuerger} 🐛	_{Andrew Nosenko} 🐛
_{CharlieJhonSmith} 💻	_{Sullivan SENECHAL} 🤔 🐛 💻	_{Jason Long} 🐛	_kxm766 🐛	_Quentin 💻 🤔 🖋	_{Daniel Lazar} 💻 🐛	_{Mark Terrel} 🐛 💻
_{Andreas Herd} 🐛	_{Sonjoy Datta} 💻	_{Ilya Belsky} 🐛	_{James Barrett} 💻	_AbbalYouness 💻	_didriklind 💻 ⚠️	_hexp1989 💻
_{Alvaro Serrano} 🖋	_{Egehan Dülger} 💻	_PabloLION 🐛 💻	_{David Sanchez} 🐛	_{Ajay Raja} 🐛	_{Andy Merskin} 🤔	_{Avirup Ghosh} 💻 🐛
_{Sanne Wintrén} 🐛	_Alessandro 🐛	_{Andrey Tatarenko} 🐛	_{Anton Rusak} 🐛	_{Mahmood Bagheri} 💻	_{Anver Sadutt} 🖋	_{Bogdan Ailincai} 💻
_{Simeon Griggs} 🐛	_Kepro 🐛	_{Jake Lippert} 🐛	_{Tu Nguyen Anh} 🐛 💻	_{Luke Shiels} 🐛	_{Sergei Kolyago} 🤔	_{Adham Akmal Azmi} 🐛
_{Alek Kowalczyk} 🐛	_{Sean Callahan} 🐛	_{Joshua Bean} 💻 🐛	_{Tim Zhao} 🐛	_Patrick 🐛	_{Bryce Dorn} 💻	_angusd3v 💻
_{Davide Di Simone} 🐛	_{Jack Herrington} 🐛	_{Avi Sharvit} 💻 🐛	_{Nicolae Maties} 🐛	_{Shardul Aeer} 🐛	_{Herlon Aguiar} 🐛	_{Alexis Oney} 🖋
_curtvict 💻	_{Josué Cortina} 🖋	_{Alex / KATT} 💻	_{Mourad EL CADI} 💻 🐛	_{James Hulena} 🐛	_{Matthew Hailwood} 💻 👀	_{Michael Norrie} 🐛
_{Valentin Politov} 💻	_{Marnus Weststrate} 💻	_mancuoj 🖋	_{Chat Sumlin} 💻	_{Owen Haupt} 🐛 🖋	_ubarbaxor 💻	_{Michael Mior} 🐛 🖋
_Pierre 💻	_{Harry B} 🐛	_Valerie 🐛 💻	_{Steven Vachon} 💻	_{Sean Kirby} ⚠️ 💻	_{Alecsander Farias} 💻	_{Rahul Mishra} 💻 👀 🖋
_{Bryant Smith} 💻 🐛	_{Rob Hannay} 💻	_Hooriza 💻 🐛	_{ShanSenanayake} 💻	_{Philip Ghering} 💻	_{Ladislas Dellinger} 💻	_Haff 💻
_Lisandro 💻	_{Amir hossein rezaei} 💻	_{Nicolas Macian} 🐛 💻	_{Nate Forsyth} 💻	_satelllte 💻 🐛	_{Federico Panico} 💻	_{William Pei Yuan} 💻
_Mihai 💻 🐛	_{Habib Ogunsola} 🖋	_{Ash Furrow} 💻	_{Daniel Turuș} 💻	_{Rahul Chaudhary} 🖋 🐛	_{Joshua Ojoawo} 🤔 🐛	_Jack 💻
_{Jon Linkens} 💻 🐛	_{Jeongjin Oh} 🐛	_{Tianning Li} 💻	_{Lars Artmann} 🖋	_KBobovskiy 💻	_{✨ Kathryn Gonzalez ✨} 🖋	_{Yaroslav Chapelskyi} 🖋
_{Samuel Van Erps} 👀	_ojolowoblue 🖋	_{Andrii Kostenko} 💻	_{Akeem Allen} 💻 🐛	_{trongbinhnguyen} 🖋	_{Aniruddha Sil} 💻	_박찬혁 👀
_Anish 💻	_{Hugo Hutri} 🖋	_{Balz Guenat} 💻	_OtterGeorge 💻	_{Samay Sagar} 🖋	_{Pedro Lisboa} 🐛	_{Henrique Malheiros} 🐛
_{Kevin Newman} 💻	_a503189 🖋	_{Mourad EL CADI} 💻	_{Pedro Henrique Lopes} 💻	_{Danbi Lee} 💻	_{Connor Jennings} 💻	_{Lucas Gomes} 🐛 💻
_{Martin Zagora} 💻	_KvD 💻	_Alex 💻	_{Kacey Cleveland} 👀	_{Avirup Ghosh} 🐛	_yabbal 💻	_{Craig Patik} 🐛
_{Soldeplata Saketos Candela} 💻	_TENDOUZHI 🐛	_{Marcin Wachulski} 🐛	_{Salman Fazal} 🐛	_shrugs 🐛	_hyodori 🐛	_{Eleazar “E” Ramos} 🐛
_retnag 🐛	_{J young Lee} 🐛	_{Filip Weiss} 🐛	_{Marius Gundersen} 🐛	_{Syed Aman Ali} 🐛	_{Axel Ingadi} 🐛	_AndyP 🐛
_{ishanVaghasiya} 🐛	_{Nico Martinucci} 🐛	_{Shiv Bhonde \| shivbhonde.eth} 🐛	_fritzmonkey 🐛	_{Rodrigo Mesquita} 🐛	_{Moshe Simantov} 🐛	_Beka 🐛
_{Abdallah Alkaser} 🐛 💻	_{Carl Smith} 🐛	_{Orlando Groppo} 🐛	_{Martĳn Saly} 🐛	_{Quinn Shanahan} 🐛	_{Antoine Kingue} 🐛	_{Žan Žlender} 🐛
_{Sebastian Dominguez} 🐛	_{James Cowan} 🐛	_{Bayram Ali Basgul} 🐛	_{Wyatt Castaneda} 🐛	_{Tim Neville} 🐛	_{Thomas Pigarelli} 🐛	_{James Herdman} 🐛
_{Grzegorz Pociejewski} 🐛	_{René Verheij} 🐛	_{PatrykKuniczak} 🐛	_{Paolo Božac} 🐛	_Rein 🐛	_FloorianB 🐛	_{Xuan Hung} 🐛
_{Monawwar Abdullah} 🐛	_{Haroldo de Oliveira Pinheiro} 🐛	_{Tamjid Ahmed} 🐛	_jv-lopez 🐛	_{Callum Macrae} 🐛	_bywater529 🐛	_{Kevin He} 🐛
_{FredericoGauz} 🐛	_{Jonathan "JonLem" Lemos} 🐛	_Xegulon 🐛	_{Tom Smedley} 🐛	_{lightbluepoppy} 🐛	_{Derek Oware} 🐛	_{Lance Gliser} 🐛
_{J. Lewis} 🐛	_Yair 🐛	_Nishchit 🐛	_Devofy 🐛	_{Josh Guyette} 🐛	_{Dora Li} 🐛	_{Kristian Gerardsson} 🐛
_{James Powell} 🐛	_{Boaz Poolman} 🐛	_roker15 🐛	_{Fadhil Ahmad} 🐛	_Chandler-Zhu 🐛	_{Nghi Nguyen} 🐛	_{Shravan Sunder} 🐛
_Johannes5 🐛	_sebahhpeya 🐛	_{Or Nakash} 🐛	_{Erez Makavy} 🐛	_{Andy Merskin} 🐛	_{ChainAlert Bot} 🐛	_{Taylor Morgan} 🐛
_wisdomabioye 🐛	_{Samuel Quiñones} 🤔	_Manuel 💻 🐛	_{Yurii Rybak} 🐛	_{Yury Demin} 🐛 💻	_{Jon Tewksbury} 💻 🐛	_{Novac Denis} 💻 🐛
_{kyrylo-soulandwolf} 💻 🐛	_{Miguel Isidoro} 💻	_{Yuriy Gromchenko} 💻	_{Jacob Hummer} 🤔	_{Kyrylo Melnychuk} 🖋 💻	_Luma 💻	_{Eliya Cohen} 💻
_{Igor Sukharev} 🐛	_pookmish 🤔	_metav-drimz 🤔	_luckrnx09 💻	_{Hubert Kuczmierczyk} 🤔 👀	_dandubya 📖	_Darwish 💻
_{Jonathan Raoult} 🐛 👀

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification ([emoji key](https://allcontributors.org/docs/en/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. [![GitHub Sponsors](https://badgen.net/badge/GitHub%20Sponsors/Donate/blue)](https://github.com/sponsors/juliencrn) [![Paypal](https://badgen.net/badge/Paypal/Donate/blue)](https://www.paypal.com/paypalme/juliencrn) [![Stripe](https://badgen.net/badge/Stripe/Donate/blue)](https://buy.stripe.com/fZefZY8Bv32cg9O3cc) [![Buy me a coffee](https://badgen.net/badge/Buy%20me%20a%20coffee/Donate/blue)](https://www.buymeacoffee.com/juliencrn) BTC: `bc1qwys40tnd0lxf9lr9l0t6xc63dpxyucj4x4nay0` ETH: `0x36a85155a8300754C56395D5af24553FB18915D6` ## 📝 License This project is [MIT](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE) licensed.