usehooks-ts

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

HookReact
juliencrn/usehooks-tsusehooks-ts.comusehooks-ts

README

usehooks-ts banner

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:

node@16.x
npm@^8

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

Then fork the repository, clone it and install.

  1. ``` shell
  2. git clone https://github.com/{your_username}/usehooks-ts.git
  3. cd usehooks-ts
  4. npm install
  5. ```

Create or update a new hook


  1. ``` shell
  2. # This command generates boilerplate for new hooks.
  3. # Skip if updating an existed hook.
  4. npm run plop

  6. # Then develop the hook (aka test:watch)
  7. npm run dev

  9. # Once the hooks is ready
  10. # Launch the documentation website
  11. # Note: to build the website, you have to compile the usehooks-ts lib
  12. # first, which create website content in the `website/generated` folder,
  13. # used by Gatsby to create pages
  14. cd website
  15. npm install
  16. npm run start

  18. # Before commit: exec types-checking, linters and tests
  19. cd ..
  20. npm run test
  21. ```

How is structured a hook ?


  1. ``` shell
  2. �� ./src
  3. ├── �� useHookName
  4. │  ├── �� useHookName.demo.tsx # working demo
  5. │  ├── �� useHookName.mdx # the documentation content
  6. │  ├── �� useHookName.test.ts # unit tests
  7. │  └── �� useHookName.ts # the hook
  8. ...
  9. ```

When the usehooks-tsis 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 ❤️

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.