usehooks.ts
React hook library, ready to use, written in Typescript.
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