usehooks-ts

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

npm i usehooks-ts

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

📖 Summary

• useBoolean()
• useClickAnyWhere()
• useCopyToClipboard()
• useCountdown()
• useCounter()
• useDarkMode()
• useDebounce()
• useDebounceCallback()
• useDebounceValue()
• useDocumentTitle()
• useEventCallback()
• useEventListener()
• useHover()
• useIntersectionObserver()
• useInterval()
• useIsClient()
• useIsMounted()
• useIsomorphicLayoutEffect()
• useLocalStorage()
• useLockedBody()
• useMap()
• useMediaQuery()
• useOnClickOutside()
• useReadLocalStorage()
• useResizeObserver()
• useScreen()
• useScript()
• useSessionStorage()
• useStep()
• useTernaryDarkMode()
• useTimeout()
• useToggle()
• useUnmount()
• useWindowSize()

🤝 How to Contribute

Thanks for wanting to contribute! It's more than welcome 🤗

Content changes

Most content changes (like fixing a typo) can be made without cloning the repository. Simply locate the file you wish to change in the GitHub UI, and click the little edit icon to make your change directly on the GitHub website.

If you need to make any other substantial changes, then follow the project setup steps below.

Fork to submit a Pull Request (PR)

Before starting, make sure you have the good system dependencies:

• node@16.x
• pnpm@^8

Note: To easily switch node version, consider Node Version Manager (nvm).

Then fork the repository, clone it and install.

git clone https://github.com/{your_username}/usehooks-ts.git
cd usehooks-ts
pnpm install

Create or update a new hook

# This command generates boilerplate for new hooks.
# Skip if updating an existed hook.
pnpm gen-hook

# start working
pnpm dev
# or
pnpm dev --filter=usehooks-ts # jest --watch
pnpm dev --filter=www # next dev

# Develop
pnpm build
pnpm lint
pnpm test

How is a hook structured?

📂 ./packages/usehooks-ts
├── 📂 useHookName
│  ├── 📄 useHookName.demo.tsx # working demo
│  ├── 📝 useHookName.mdx # the documentation content
│  ├── 🧪 useHookName.test.ts # unit tests
│  ├── 📄 useHookName.ts # the hook
│  └── 📄 index.ts
...

When the usehooks-ts is compiled, only the necessary files are used. The other files are copied in the documentation website.

Note: The demo is used in a different way:

• It's displayed on the website to illustrate how to use the hook.
• It's deployed as a CodeSandbox on build to let final users play with.

💚 Backers

Big thanks go to all our backers!

Sentry

KATT

Adhi Ravishankar

great-work-told-is

✨ Contributors

Big thanks go to all our contributors!

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 🐛	Martijn 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 🤔

This project follows the all-contributors specification (emoji key). Contributions of any kind welcome!

📝 License

This project is MIT licensed.