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

🤔 About

Initially, usehooks-ts was a Gatsby powered blog hosted with Github & netlify that publishes easy to understand React Hook code snippets.

But now, it's a monorepo containing:

• A static website used as hooks documentation (Link).
• An NPM package containing the hooks library (Link).

If you'd like to submit new post ideas, improve existing posts, or change anything about the website feel free to submit an issue or pull-request.

📖 Summary

• useBoolean()
• useClickAnyWhere()
• useCopyToClipboard()
• useCountdown()
• useCounter()
• useDarkMode()
• useDebounce()
• useEffectOnce()
• useElementSize()
• useEventListener()
• useFetch()
• useHover()
• useImageOnLoad()
• useIntersectionObserver()
• useInterval()
• useIsClient()
• useIsFirstRender()
• useIsMounted()
• useIsomorphicLayoutEffect()
• useLocalStorage()
• useLockedBody()
• useMap()
• useMediaQuery()
• useOnClickOutside()
• useReadLocalStorage()
• useScreen()
• useScript()
• useSessionStorage()
• useSsr()
• useStep()
• useTernaryDarkMode()
• useTimeout()
• useUpdateEffect()
• useWindowSize()

Usage

install

npm i usehooks-ts

Then go to the documentation.

🤝 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)

This project use npm Lerna and npm@8 to manage the different packages. Before starting, make sure you have the good system dependencies:

• node@16.x
• npm@^8

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

Then you can fork, download and install the repository:

# 1) Fork the repository (button in the Github top-right corner)

# 2) Clone the repository
git clone https://github.com/{your_username}/usehooks-ts.git
cd usehooks-ts

# 3) Install dependencies and setup
npm run bootstrap

Create or update a new hook

# This command generates boilerplate for new hooks.
# Skip if updating an existed hook.
npm run plop

# Then develop the hook (aka test:watch)
npm run dev:lib

# Once the hooks is ready
# Launch the documentation website
npm run dev:site

# Before commit: exec types-checking, linters and tests
npm run test

How is structured a hook ?

The hook itself and its unit tests are in the /lib/src/ folder. It's the strict npm run test

📂 lib/src
├── 📂 useHookName
│  ├── 📄 index.ts # used for exports
│  ├── 🧪 useHookName.test.ts # unit tests
│  └── 📄 useHookName.ts # the hook
...

The rest is in the documentation website:

📂 site/src/hooks-doc
├── 📂 useHookName
│  ├── 📄 index.ts # used for exports
│  ├── 📄 useHookName.demo.tsx # working demo
│  └── 📝 useHookName.mdx # the documentation content
...

Note: The demo is used different way:

• It's displayed on the website to illustrate how to use the hook.
• It's displayed as an interactive sandbox in the hook page during the dev.
• It's deployed as a CodeSandbox on build to let final users play with.

✨ Contributors

Big thanks goes to these wonderful people ❤️

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 💻
Kevin Dai 💻	Gomes 💻	Davide Di Simone 🐛	Jack Herrington 💻 🐛

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

🚗 Roadmap

• Add more hooks
• Develop automated tests for all hooks

📝 License

This project is MIT licensed.