useHooks(🔥).ts

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

— usehooks-typescript.com —

README Sections: About - Hook Summary - Installation - Made with - Contributing - License

🤔 About

This is the repository for usehooks.ts, a Gatsby powered blog hosted with Github & netlify that publishes easy to understand React Hook code snippets.

UseHooks.ts has been strongly inspired by usehooks.com, thanks to him. My objective here is to publish my hooks in Typescript in order to find them quickly

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
• useCopyToClipboard
• useCounter
• useDarkMode
• useDebounce
• useElementSize
• useEventListener
• useFetch
• useHover
• useImageOnLoad
• useIntersectionObserver
• useInterval
• useIsClient
• useIsMounted
• useLocalStorage
• useLockedBody
• useOnClickOutside
• useReadLocalStorage
• useScreen
• useScript
• useSiteMetadata
• useSsr
• useTimeout
• useWindowSize

👉 Installation

Note: The project use Node@14 and npm@6.

# Clone the repository
git clone https://github.com/juliencrn/usehooks.ts.git
cd useHooks.ts

# Install dependencies
npm i

# Start
npm start

Others scripts

# Production
npm run build # Create production bundle
npm run serve # Run production bundle

# Development
npm run start # Start and watch app locally
npm run develop # Same as above
npm run clean # Remove gatsby cache and previous builds
npm run lint # Run Eslint checker
npm run lint-fix # Same as above and do fix automatically
npm run format # Run Prettier and do fix automatically
npm run check # Run Typescript types checker
npm run test # Exec lint, check and run Jest
npm run test:watch # Same as above in watch mode
npm run upgrade-interactive # Interactive CLI app to upgrade dependencies

# Content
npm run plop # Create a hook component with CLI tool
npm run copy:hooks # Create *.mdx files from hook's source code
npm run update:readme # Update hooks summary in readme

See more in package.json.

🙌 Made with

React - Typescript - Gatsby - Material-ui - Jest - @testing-library - Mdx - Prism - Dracula colors

🚗 Roadmap

• Add new hooks
• Set up automated tests for hooks
• Add a live preview system to interact with hooks

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

💚 Support the project

Give a ⭐ if this project helped you!

Thanks! ❤️

📝 License

Copyright © 2020 Julien Caron.

This project is MIT licensed.

---

Built with ❤️ with Gatsby & Typescript