/usehooks-ts

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

Primary LanguageTypeScriptMIT LicenseMIT

usehooks-ts banner


usehooks-ts

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

License npm bundle size npm All Contributors


npm i usehooks-ts

Created by Julien Caron and maintained with ❀️ by an amazing team of developers.

πŸ“– Summary

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

git clone https://github.com/{your_username}/usehooks-ts.git
cd usehooks-ts
npm install

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

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

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

How is structured a hook ?

πŸ“‚ ./src
β”œβ”€β”€ πŸ“‚ 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.