gitmyhub

usehooks

MDX ★ 11k updated 1y ago

A collection of modern, server-safe React hooks – from the ui.dev team

A collection of about 40 ready-made React hooks covering common tasks like geolocation, clipboard, local storage, and media queries, so you don't have to write them yourself.

JavaScriptTypeScriptReactsetup: easycomplexity 2/5

useHooks is a collection of ready-made React hooks published as an npm package by the ui.dev team. In React, a hook is a function that lets you add specific behaviors to a component without writing everything from scratch. This library provides about 40 hooks covering common tasks that come up repeatedly in web development.

The hooks cover a wide range of browser and UI behaviors. Some interact with device state: useGeolocation tracks the user's location, useBattery reads the device battery level, useNetworkState shows whether the browser is online or offline, and useMediaQuery responds to CSS breakpoints. Others manage user interactions: useClickAway detects clicks outside an element, useLongPress handles long press gestures, useHover tracks mouse hover state, and useCopyToClipboard writes text to the clipboard. Storage hooks like useLocalStorage and useSessionStorage wrap the browser's built-in storage with a React-friendly interface that updates components automatically.

There is also a set of utility hooks for managing lists, sets, maps, counters, toggles, and queues as state, so you do not have to write your own management logic each time.

The library is split into a stable release and an experimental release. The stable version works with React 18 and later. The experimental hooks require React's experimental build and cover things like fetch requests, event listeners, intervals, and timers.

Installation is a single npm command and each hook is documented with examples on the usehooks.com website. This is primarily useful for React developers who want to avoid reimplementing standard browser interactions themselves.

Where it fits