npm i usehooks-ts
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.
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()useSsr()useStep()useTernaryDarkMode()useTimeout()useUpdateEffect()useWindowSize()
npm i usehooks-tsThen go to the documentation.
Thanks for wanting to contribute! It's more than welcome 🤗
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.
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# 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 testThe 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.
Big thanks goes to these wonderful people ❤️
This project follows the all-contributors specification (emoji key). Contributions of any kind welcome!
- Add new hooks (web3 hooks are welcome!)
- Develop automated tests for all hooks
This project is MIT licensed.