Awesome Open Source
Awesome Open Source
usehooks-ts banner

usehooks-ts

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

Netlify Status Open Source? Yes! Maintained License lerna npm bundle size npm All Contributors


npm i usehooks-ts

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

πŸ€” 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

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 [email protected] to manage the different packages. Before starting, make sure you have the good system dependencies:

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 ❀️


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

πŸ€”

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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (263,621)Β 
Reactjs (75,636)Β 
Material Ui (3,628)Β 
Gatsby (3,170)Β 
Hooks (2,939)Β 
React Hooks (2,739)Β 
Mdx (457)Β 
Related Projects
Advertising πŸ“¦Β 9
All Projects
Application Programming Interfaces πŸ“¦Β 120
Applications πŸ“¦Β 181
Artificial Intelligence πŸ“¦Β 72
Blockchain πŸ“¦Β 70
Build Tools πŸ“¦Β 111
Cloud Computing πŸ“¦Β 79
Code Quality πŸ“¦Β 28
Collaboration πŸ“¦Β 30
Command Line Interface πŸ“¦Β 48
Community πŸ“¦Β 81
Companies πŸ“¦Β 60
Compilers πŸ“¦Β 60
Computer Science πŸ“¦Β 74
Configuration Management πŸ“¦Β 39
Content Management πŸ“¦Β 167
Control Flow πŸ“¦Β 197
Data Formats πŸ“¦Β 77
Data Processing πŸ“¦Β 266
Data Storage πŸ“¦Β 132
Economics πŸ“¦Β 60
Frameworks πŸ“¦Β 198
Games πŸ“¦Β 122
Graphics πŸ“¦Β 103
Hardware πŸ“¦Β 148
Integrated Development Environments πŸ“¦Β 47
Learning Resources πŸ“¦Β 147
Legal πŸ“¦Β 28
Libraries πŸ“¦Β 119
Lists Of Projects πŸ“¦Β 21
Machine Learning πŸ“¦Β 336
Mapping πŸ“¦Β 61
Marketing πŸ“¦Β 15
Mathematics πŸ“¦Β 55
Media πŸ“¦Β 228
Messaging πŸ“¦Β 97
Networking πŸ“¦Β 304
Operating Systems πŸ“¦Β 84
Operations πŸ“¦Β 120
Package Managers πŸ“¦Β 52
Programming Languages πŸ“¦Β 229
Runtime Environments πŸ“¦Β 96
Science πŸ“¦Β 42
Security πŸ“¦Β 375
Social Media πŸ“¦Β 26
Software Architecture πŸ“¦Β 70
Software Development πŸ“¦Β 68
Software Performance πŸ“¦Β 57
Software Quality πŸ“¦Β 127
Text Editors πŸ“¦Β 45
Text Processing πŸ“¦Β 131
User Interface πŸ“¦Β 310
User Interface Components πŸ“¦Β 465
Version Control πŸ“¦Β 29
Virtualization πŸ“¦Β 68
Web Browsers πŸ“¦Β 38
Web Servers πŸ“¦Β 25
Web User Interface πŸ“¦Β 194