juliencrn/usehooks-ts

This is stars and forks stats for /juliencrn/usehooks-ts repository. As of 27 Apr, 2024 this repository has 4465 stars and 320 forks.

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() useDocumentTitle() 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() useToggle() useUpdateEffect() 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: [email protected] 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 types-check 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 ... 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 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. ✨ 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💻 🐛 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💻 This project follows the all-contributors specification (emoji key). Contributions of any kind welcome! 🚗 Roadmap Unit-test all hooks Add more hooks 📝 License This project is MIT licensed.