Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/juliencrn/usehooks-ts

React hook library, ready to use, written in Typescript.
https://github.com/juliencrn/usehooks-ts

hook hooks mdx nextjs react react-hook react-hooks reactjs typescript

Last synced: 11 days ago
JSON representation

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

Awesome Lists containing this project

README

        

usehooks-ts banner



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
Sentry

KATT
KATT

Adhi Ravishankar
Adhi Ravishankar

great-work-told-is
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
Julien

πŸ–‹ πŸ’» 🎨 πŸ€”
a777med
a777med

πŸ’»
Nguyen Tien Dat
Nguyen Tien Dat

πŸ’»
Elias Cohenca
Elias Cohenca

πŸ–‹
JoΓ£o Deroldo
JoΓ£o Deroldo

πŸ› πŸ’»
Nishit
Nishit

πŸ’»
Jon Koops
Jon Koops

πŸ’»


LoneRifle
LoneRifle

πŸ’»
Viktor
Viktor

πŸ€” πŸ›
Bruno Clermont
Bruno Clermont

πŸ’¬
yoannesbourg
yoannesbourg

πŸ€”
Strange2x
Strange2x

πŸ€”
Jason Pickens
Jason Pickens

πŸ›
Sel-Vin Kuik
Sel-Vin Kuik

πŸ›


isaac
isaac

πŸ›
Bruno RZN
Bruno RZN

πŸ’» πŸ‘€
Nathan Manceaux-Panot
Nathan Manceaux-Panot

πŸ’» πŸ‘€
Dien Vu
Dien Vu

πŸ€”
Oleg Kusov
Oleg Kusov

πŸ€”
Matthew Guy
Matthew Guy

πŸ€”
andrewbihl
andrewbihl

πŸ›


lancepollard
lancepollard

πŸ›
Mukul Bansal
Mukul Bansal

πŸ›
Jean-Luc Mongrain sur la Brosse
Jean-Luc Mongrain sur la Brosse

πŸ’» πŸ€”
Nic
Nic

πŸ–‹
Dan Wood
Dan Wood

πŸ’»
jo wendenbuerger
jo wendenbuerger

πŸ›
Andrew Nosenko
Andrew Nosenko

πŸ›


CharlieJhonSmith
CharlieJhonSmith

πŸ’»
Sullivan SENECHAL
Sullivan SENECHAL

πŸ€” πŸ› πŸ’»
Jason Long
Jason Long

πŸ›
kxm766
kxm766

πŸ›
Quentin
Quentin

πŸ’» πŸ€” πŸ–‹
Daniel Lazar
Daniel Lazar

πŸ’» πŸ›
Mark Terrel
Mark Terrel

πŸ› πŸ’»


Andreas Herd
Andreas Herd

πŸ›
Sonjoy Datta
Sonjoy Datta

πŸ’»
Ilya Belsky
Ilya Belsky

πŸ›
James Barrett
James Barrett

πŸ’»
AbbalYouness
AbbalYouness

πŸ’»
didriklind
didriklind

πŸ’» ⚠️
hexp1989
hexp1989

πŸ’»


Alvaro Serrano
Alvaro Serrano

πŸ–‹
Egehan DΓΌlger
Egehan DΓΌlger

πŸ’»
PabloLION
PabloLION

πŸ› πŸ’»
David Sanchez
David Sanchez

πŸ›
Ajay Raja
Ajay Raja

πŸ›
Andy Merskin
Andy Merskin

πŸ€”
Avirup Ghosh
Avirup Ghosh

πŸ’» πŸ›


Sanne WintrΓ©n
Sanne WintrΓ©n

πŸ›
Alessandro
Alessandro

πŸ›
Andrey Tatarenko
Andrey Tatarenko

πŸ›
Anton Rusak
Anton Rusak

πŸ›
Mahmood Bagheri
Mahmood Bagheri

πŸ’»
Anver Sadutt
Anver Sadutt

πŸ–‹
Bogdan Ailincai
Bogdan Ailincai

πŸ’»


Simeon Griggs
Simeon Griggs

πŸ›
Kepro
Kepro

πŸ›
Jake Lippert
Jake Lippert

πŸ›
Tu Nguyen Anh
Tu Nguyen Anh

πŸ› πŸ’»
Luke Shiels
Luke Shiels

πŸ›
Sergei Kolyago
Sergei Kolyago

πŸ€”
Adham Akmal Azmi
Adham Akmal Azmi

πŸ›


Alek Kowalczyk
Alek Kowalczyk

πŸ›
Sean Callahan
Sean Callahan

πŸ›
Joshua Bean
Joshua Bean

πŸ’» πŸ›
Tim Zhao
Tim Zhao

πŸ›
Patrick
Patrick

πŸ›
Bryce Dorn
Bryce Dorn

πŸ’»
angusd3v
angusd3v

πŸ’»


Davide Di Simone
Davide Di Simone

πŸ›
Jack Herrington
Jack Herrington

πŸ›
Avi Sharvit
Avi Sharvit

πŸ’» πŸ›
Nicolae Maties
Nicolae Maties

πŸ›
Shardul Aeer
Shardul Aeer

πŸ›
Herlon Aguiar
Herlon Aguiar

πŸ›
Alexis Oney
Alexis Oney

πŸ–‹


curtvict
curtvict

πŸ’»
JosuΓ© Cortina
JosuΓ© Cortina

πŸ–‹
Alex / KATT
Alex / KATT

πŸ’»
Mourad EL CADI
Mourad EL CADI

πŸ’» πŸ›
James Hulena
James Hulena

πŸ›
Matthew Hailwood
Matthew Hailwood

πŸ’» πŸ‘€
Michael Norrie
Michael Norrie

πŸ›


Valentin Politov
Valentin Politov

πŸ’»
Marnus Weststrate
Marnus Weststrate

πŸ’»
mancuoj
mancuoj

πŸ–‹
Chat Sumlin
Chat Sumlin

πŸ’»
Owen Haupt
Owen Haupt

πŸ› πŸ–‹
ubarbaxor
ubarbaxor

πŸ’»
Michael Mior
Michael Mior

πŸ› πŸ–‹


Pierre
Pierre

πŸ’»
Harry B
Harry B

πŸ›
Valerie
Valerie

πŸ› πŸ’»
Steven Vachon
Steven Vachon

πŸ’»
Sean Kirby
Sean Kirby

⚠️ πŸ’»
Alecsander Farias
Alecsander Farias

πŸ’»
Rahul Mishra
Rahul Mishra

πŸ’» πŸ‘€ πŸ–‹


Bryant Smith
Bryant Smith

πŸ’» πŸ›
Rob Hannay
Rob Hannay

πŸ’»
Hooriza
Hooriza

πŸ’» πŸ›
ShanSenanayake
ShanSenanayake

πŸ’»
Philip Ghering
Philip Ghering

πŸ’»
Ladislas Dellinger
Ladislas Dellinger

πŸ’»
Haff
Haff

πŸ’»


Lisandro
Lisandro

πŸ’»
Amir hossein rezaei
Amir hossein rezaei

πŸ’»
Nicolas Macian
Nicolas Macian

πŸ› πŸ’»
Nate Forsyth
Nate Forsyth

πŸ’»
satelllte
satelllte

πŸ’» πŸ›
Federico Panico
Federico Panico

πŸ’»
William Pei Yuan
William Pei Yuan

πŸ’»


Mihai
Mihai

πŸ’» πŸ›
Habib Ogunsola
Habib Ogunsola

πŸ–‹
Ash Furrow
Ash Furrow

πŸ’»
Daniel TuruΘ™
Daniel TuruΘ™

πŸ’»
Rahul Chaudhary
Rahul Chaudhary

πŸ–‹ πŸ›
Joshua Ojoawo
Joshua Ojoawo

πŸ€” πŸ›
Jack
Jack

πŸ’»


Jon Linkens
Jon Linkens

πŸ’» πŸ›
Jeongjin Oh
Jeongjin Oh

πŸ›
Tianning Li
Tianning Li

πŸ’»
Lars Artmann
Lars Artmann

πŸ–‹
KBobovskiy
KBobovskiy

πŸ’»
✨ Kathryn Gonzalez ✨
✨ Kathryn Gonzalez ✨

πŸ–‹
Yaroslav Chapelskyi
Yaroslav Chapelskyi

πŸ–‹


Samuel Van Erps
Samuel Van Erps

πŸ‘€
ojolowoblue
ojolowoblue

πŸ–‹
Andrii Kostenko
Andrii Kostenko

πŸ’»
Akeem Allen
Akeem Allen

πŸ’» πŸ›
trongbinhnguyen
trongbinhnguyen

πŸ–‹
Aniruddha Sil
Aniruddha Sil

πŸ’»
λ°•μ°¬ν˜
λ°•μ°¬ν˜

πŸ‘€


Anish
Anish

πŸ’»
Hugo Hutri
Hugo Hutri

πŸ–‹
Balz Guenat
Balz Guenat

πŸ’»
OtterGeorge
OtterGeorge

πŸ’»
Samay Sagar
Samay Sagar

πŸ–‹
Pedro Lisboa
Pedro Lisboa

πŸ›
Henrique Malheiros
Henrique Malheiros

πŸ›


Kevin Newman
Kevin Newman

πŸ’»
a503189
a503189

πŸ–‹
Mourad EL CADI
Mourad EL CADI

πŸ’»
Pedro Henrique Lopes
Pedro Henrique Lopes

πŸ’»
Danbi Lee
Danbi Lee

πŸ’»
Connor Jennings
Connor Jennings

πŸ’»
Lucas Gomes
Lucas Gomes

πŸ› πŸ’»


Martin Zagora
Martin Zagora

πŸ’»
KvD
KvD

πŸ’»
Alex
Alex

πŸ’»
Kacey Cleveland
Kacey Cleveland

πŸ‘€
Avirup Ghosh
Avirup Ghosh

πŸ›
yabbal
yabbal

πŸ’»
Craig Patik
Craig Patik

πŸ›


Soldeplata Saketos Candela
Soldeplata Saketos Candela

πŸ’»
TENDOUZHI
TENDOUZHI

πŸ›
Marcin Wachulski
Marcin Wachulski

πŸ›
Salman Fazal
Salman Fazal

πŸ›
shrugs
shrugs

πŸ›
hyodori
hyodori

πŸ›
Eleazar β€œE” Ramos
Eleazar β€œE” Ramos

πŸ›


retnag
retnag

πŸ›
J young Lee
J young Lee

πŸ›
Filip Weiss
Filip Weiss

πŸ›
Marius Gundersen
Marius Gundersen

πŸ›
Syed Aman Ali
Syed Aman Ali

πŸ›
Axel Ingadi
Axel Ingadi

πŸ›
AndyP
AndyP

πŸ›


ishanVaghasiya
ishanVaghasiya

πŸ›
Nico Martinucci
Nico Martinucci

πŸ›
Shiv Bhonde | shivbhonde.eth
Shiv Bhonde | shivbhonde.eth

πŸ›
fritzmonkey
fritzmonkey

πŸ›
Rodrigo Mesquita
Rodrigo Mesquita

πŸ›
Moshe Simantov
Moshe Simantov

πŸ›
Beka
Beka

πŸ›


Abdallah Alkaser
Abdallah Alkaser

πŸ› πŸ’»
Carl Smith
Carl Smith

πŸ›
Orlando Groppo
Orlando Groppo

πŸ›
MartΔ³n Saly
MartΔ³n Saly

πŸ›
Quinn Shanahan
Quinn Shanahan

πŸ›
Antoine Kingue
Antoine Kingue

πŸ›
Ε½an Ε½lender
Ε½an Ε½lender

πŸ›


Sebastian Dominguez
Sebastian Dominguez

πŸ›
James Cowan
James Cowan

πŸ›
Bayram Ali Basgul
Bayram Ali Basgul

πŸ›
Wyatt Castaneda
Wyatt Castaneda

πŸ›
Tim Neville
Tim Neville

πŸ›
Thomas Pigarelli
Thomas Pigarelli

πŸ›
James Herdman
James Herdman

πŸ›


Grzegorz Pociejewski
Grzegorz Pociejewski

πŸ›
RenΓ© Verheij
RenΓ© Verheij

πŸ›
PatrykKuniczak
PatrykKuniczak

πŸ›
Paolo BoΕΎac
Paolo BoΕΎac

πŸ›
Rein
Rein

πŸ›
FloorianB
FloorianB

πŸ›
Xuan Hung
Xuan Hung

πŸ›


Monawwar Abdullah
Monawwar Abdullah

πŸ›
Haroldo de Oliveira Pinheiro
Haroldo de Oliveira Pinheiro

πŸ›
Tamjid Ahmed
Tamjid Ahmed

πŸ›
jv-lopez
jv-lopez

πŸ›
Callum Macrae
Callum Macrae

πŸ›
bywater529
bywater529

πŸ›
Kevin He
Kevin He

πŸ›


FredericoGauz
FredericoGauz

πŸ›
Jonathan "JonLem" Lemos
Jonathan "JonLem" Lemos

πŸ›
Xegulon
Xegulon

πŸ›
Tom Smedley
Tom Smedley

πŸ›
lightbluepoppy
lightbluepoppy

πŸ›
Derek Oware
Derek Oware

πŸ›
Lance Gliser
Lance Gliser

πŸ›


J. Lewis
J. Lewis

πŸ›
Yair
Yair

πŸ›
Nishchit
Nishchit

πŸ›
Devofy
Devofy

πŸ›
Josh Guyette
Josh Guyette

πŸ›
Dora Li
Dora Li

πŸ›
Kristian Gerardsson
Kristian Gerardsson

πŸ›


James Powell
James Powell

πŸ›
Boaz Poolman
Boaz Poolman

πŸ›
roker15
roker15

πŸ›
Fadhil Ahmad
Fadhil Ahmad

πŸ›
Chandler-Zhu
Chandler-Zhu

πŸ›
Nghi Nguyen
Nghi Nguyen

πŸ›
Shravan Sunder
Shravan Sunder

πŸ›


Johannes5
Johannes5

πŸ›
sebahhpeya
sebahhpeya

πŸ›
Or Nakash
Or Nakash

πŸ›
Erez Makavy
Erez Makavy

πŸ›
Andy Merskin
Andy Merskin

πŸ›
ChainAlert Bot
ChainAlert Bot

πŸ›
Taylor Morgan
Taylor Morgan

πŸ›


wisdomabioye
wisdomabioye

πŸ›
Samuel QuiΓ±ones
Samuel QuiΓ±ones

πŸ€”
Manuel
Manuel

πŸ’» πŸ›
Yurii Rybak
Yurii Rybak

πŸ›
Yury Demin
Yury Demin

πŸ› πŸ’»
Jon Tewksbury
Jon Tewksbury

πŸ’» πŸ›
Novac Denis
Novac Denis

πŸ’» πŸ›


kyrylo-soulandwolf
kyrylo-soulandwolf

πŸ’» πŸ›
Miguel Isidoro
Miguel Isidoro

πŸ’»
Yuriy Gromchenko
Yuriy Gromchenko

πŸ’»
Jacob Hummer
Jacob Hummer

πŸ€”
Kyrylo Melnychuk
Kyrylo Melnychuk

πŸ–‹ πŸ’»
Luma
Luma

πŸ’»
Eliya Cohen
Eliya Cohen

πŸ’»


Igor Sukharev
Igor Sukharev

πŸ›
pookmish
pookmish

πŸ€”
metav-drimz
metav-drimz

πŸ€”
luckrnx09
luckrnx09

πŸ’»
Hubert Kuczmierczyk
Hubert Kuczmierczyk

πŸ€” πŸ‘€
dandubya
dandubya

πŸ“–
Darwish
Darwish

πŸ’»


Jonathan Raoult
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.