🤔
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()useLocalStorage()useLockedBody()useMap()useMediaQuery()useOnClickOutside()useReadLocalStorage()useScreen()useScript()useSsr()useStep()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@^16npm@^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 a new hook
# This command will regenerate all the hook boilerplate
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
This project follows the all-contributors specification (emoji key). Contributions of any kind welcome!
🚗
Roadmap
- Add new hooks (web3 hooks are welcome!)
- Develop automated tests for all hooks
📝
License
This project is MIT licensed.
![[feature] can you guys please add use-reduction](https://avatars.githubusercontent.com/u/57794102?v=4)
2 Mar 29, 2022
12 Nov 1, 2022
37 Nov 22, 2022
18 Nov 30, 2022
51 Dec 13, 2022
4 Nov 28, 2022
22 Dec 15, 2022
17.2k Jan 9, 2023
2 May 15, 2022
1 Dec 25, 2021
34 Dec 18, 2022
7 Nov 16, 2022
37 Oct 16, 2022
1 Dec 19, 2021
9.1k Jan 6, 2023
6 Jul 31, 2022
2 Dec 21, 2022
18.2k Jan 8, 2023
19 Oct 7, 2022