15+ Perfect React Hooks Component Examples
1.React Falcon form
Form handling and error validation in React hooks.
Features
- Specific message for custom conditionals.
- React-native support.
- Tiny bundle with no dependencies.
- native HTML support.
Live Examples
Basic Usage: Source | Sandbox
2.Beautiful React Hooks
A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development.
Features
- Concise API
- Small and lightweight
- Easy to learn
- Functional approach
- Fully written in JS (although TS types are supported)
Demo: https://beautifulinteractions.github.io/beautiful-react-hooks/
View on Github
3.React undux
Dead simple state for React. Now with Hooks support. https://undux.org
4.Little State Machine
React hooks for persist state management based.
Features
- Follow flux application architecture
- Tiny with 0 dependency and simple (less 1kb)
- Persist state by default (sessionStorage)
- Build with React Hooks
Demo: https://codesandbox.io/s/lrz5wloklm
View on Github
5. React swr
SWR is a React Hooks library for remote data fetching.
The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
It features:
- Transport and protocol agnostic data fetching
- Fast page navigation
- Revalidation on focus
- Interval polling
- Local mutation
- Pagination
- TypeScript ready
- Suspense mode
- Minimal API
With SWR, components will get a stream of data updates constantly and automatically, Thus, the UI will be always fast and reactive.
Demo: https://swr.now.sh/
View on Github
6.Use Tensorflow
A React hook for tensorflow.js to detect objects and poses easily:
7.React table
Hooks for building lightweight, fast and extendable datagrids for React.
Enjoy this library? Try them all! React Query, React Form, React Charts
Features
- Lightweight (4kb - 9kb depending on features and tree-shaking)
- Headless (100% customizable, Bring-your-own-UI)
- Auto out of the box, fully controllable API
- Sorting (Multi and Stable)
- Filters
- Pivoting & Aggregation
- Row Selection
- Row Expansion
- Column Ordering
- Animatable
- Virtualizable
- Server-side/controlled data/state
- Extensible via hook-based plugin system
“Why I wrote React Table and the problems it has solved for Nozzle.io” by Tanner Linsley
8.Todoist
Building Todoist from Scratch Using React (Custom Hooks, Context), Firebase & React Testing Library
This application (a Todoist clone) was built using create-react-app as a base, and the technologies used were React (Custom Hooks, Context), Firebase & React Testing Library. I’m hoping this gives people a better understanding of React, and I’ve also included SCSS in this tutorial, but the main focus is to build a real application using React! If you clone this application, click the Pizza icon on the top right, it enables dark mode!
Subscribe to my YouTube channel here: http://bit.ly/CognitiveSurge where I build projects like this! And don’t forget, you can contribute to this project (highly encouraged!). One thing I didn’t get time to do was incorporate accessibility into this application, so I’d love to see that added!
9.React use localstorage
Access Local Storage using React hooks.
Demo: https://codesandbox.io/s/09xj95vxl
View on Github
10.Otp input React
React NPM library starter kit
based on Facebook’s Create react app. We are constantly updating repository with the updates of create-react-app, so we have all new features and bug fixes of it.
Demo: https://shubhanus.github.io/otp-input-react/
View on Github
11.Formalizer
Formalizer is a React Hooks based form validation library made for humans. The cleanest code or your money back ;)
Simple, tiny, extensible, intuitive, documented, fully tested, magical.
12. Downshift hooks
A set of hooks to build simple, flexible, WAI-ARIA compliant React dropdown components
13.React flooks
A state manager for React Hooks. Maybe the simplest. ^_^
14.React Hooks Examples
Some tiny examples using React hooks.
How to run
This project was bootstrapped with Create React App.
To run, clone the project, navigate to the project directory, and run:
npm start
Open http://localhost:3000 to view it in the browser.
15.React hotkeys hook
React hook for using keyboard shortcuts in components. This is a hook version for the hotkeys package.
Documentation and live example
https://johannesklauss.github.io/react-hotkeys-hook/
16.React Loops — React Velcro Architecture
React Loops work alongside React Hooks as part of the novel React Velcro architecture for building sticky, secure user interfaces that don’t come apart under pressure.
17.React hook form
React hooks for forms validation without the hassle. https://react-hook-form.com
Features
- Built with performance and DX in mind
- Embrace uncontrolled form validation
- Improve controlled form’s performance
- Tiny size without any dependency
- Follows HTML standard for validation
- Compatible with React Native
- Supports Yup schema-based validation
- Supports native browser validation
- Build forms quickly with the form builder
Demo: https://react-hook-form.now.sh/
View on Github
18. React hook flow
React Hooks were introduced in version 16.8.0. They are a complete departure from class component lifecycle events. For more information, see the official React Hooks API Reference.
Here is a flow diagram that explains the new flow of a Hooks component.
#reactjs #javascript
