react-use

A collection of useful React hooks for state, lifecycle, and browser APIs.

react-use

React

A collection of useful React hooks for state, lifecycle, and browser APIs.

npm GitHub Docs

Fit

Bundle (gzip)

22.1 kB

73.8 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

React projects often reimplement common hook patterns for things like debouncing, media queries, local storage, and document visibility, leading to duplicated code and subtle bugs.

What It Does

react-use provides a large set of reusable hooks for browser APIs and common React behaviors, so you can compose features quickly without writing boilerplate logic for every component.

Installation

bash

npm install react-use

Usage Example

import { useLocalStorage, useMedia } from "react-use";

function Settings() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
  const isWide = useMedia("(min-width: 1024px)");

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>Wide screen: {isWide ? "yes" : "no"}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      >Toggle theme</button>
    </div>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.