explaingit

uidotdev/usehooks

11,481MDXAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((useHooks))
    Device State
      useGeolocation
      useBattery
      useNetworkState
    User Interactions
      useClickAway
      useLongPress
      useCopyToClipboard
    Storage
      useLocalStorage
      useSessionStorage
    Utilities
      useCounter
      useToggle
      useQueue
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Detect when a user clicks outside a dropdown or modal to close it using useClickAway.

USE CASE 2

Persist form values across page refreshes with useLocalStorage without writing storage sync code.

USE CASE 3

Show or hide UI elements based on screen width using useMediaQuery with a CSS breakpoint.

USE CASE 4

Build an offline-aware feature that degrades gracefully using useNetworkState.

Tech stack

JavaScriptTypeScriptReact

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

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.

Copy-paste prompts

Prompt 1
Using the usehooks library, build a React dropdown that closes when the user clicks anywhere outside it. Show the full component code using useClickAway.
Prompt 2
I want a React form that saves its values to localStorage and restores them on page reload. Use the useLocalStorage hook from usehooks.
Prompt 3
Build a React component that shows an 'You are offline' banner using the useNetworkState hook from usehooks.
Prompt 4
Use the useGeolocation hook from usehooks to display the user's current coordinates in a React component, with a loading state and an error state.
Prompt 5
I need a React button that detects a long press on mobile. Use the useLongPress hook from usehooks and trigger a different action than a normal tap.
Open on GitHub → Explain another repo

← uidotdev on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.