A curated drawer of React hook libraries and utilities, grouped by what they do. Companion to the React Resources page.
Hook collections
Large grab-bag libraries covering most common needs.
State
HTTP / data fetching
| Resource | Why it is useful |
|---|
| use-http | Hook for making HTTP requests with caching and SSR support. |
Storage
A minimal useMedia implementation:
function useMedia(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches)
useEffect(() => {
const media = window.matchMedia(query)
if (media.matches !== matches) {
setMatches(media.matches)
}
const listener = () => {
setMatches(media.matches)
}
media.addEventListener(listener)
return () => media.removeEventListener(listener)
}, [matches, query])
return matches
}
// Example usage:
function SomeComponent() {
let isWide = useMedia('(min-width: 800px)')
return (<div>The window is {isWide ? 'wide' : 'not wide'}</div>)
}
| Resource | Why it is useful |
|---|
| validator.js | Lightweight form validation. |
Lists / selection
| Resource | Why it is useful |
|---|
| use-item-list | Hook for building accessible select/list widgets. |
Virtualization
| Resource | Why it is useful |
|---|
| react-cool-virtual | Virtualize long lists and grids for performance. |
Utilities