react-use

What is react-use?

The react-use package is a collection of essential React hooks that provide a variety of functionalities to manage state, lifecycle, and side effects in functional components. It simplifies the process of creating complex components by abstracting common behavior into reusable hooks.

What are react-use's main functionalities?

State Management

Manage state with local storage persistence using useLocalStorage hook.

const [state, setState] = useLocalStorage('my-key', initialValue);

Lifecycle and Side Effects

Handle component lifecycle events with useEffectOnce hook.

useEffectOnce(() => { console.log('Component mounted'); return () => console.log('Component will unmount'); });

Sensors

Access sensor data like battery status using useBattery hook.

const state = useBattery();

Animations

Create animations with useSpring hook.

const [style, play] = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });

UI State

Control UI state such as fullscreen mode with useFullscreen hook.

const [isFullscreen, toggleFullscreen] = useFullscreen(ref);

Other packages similar to react-use

recompose

Recompose is a React utility belt for function components and higher-order components. It's similar to react-use in that it provides a set of helpers for creating and manipulating components, but it does not focus exclusively on hooks.

react-powerhooks

React-powerhooks offers a set of hooks that can be used to manage state and lifecycle in React components, similar to react-use. However, react-use has a broader range of hooks, including those for sensors and UI state management.

README

👍
react-use

^{Collection of essential React Hooks.
This is mostly port of libreact to React Hooks.}

npm i react-use

Reference

• State
  • useToggle — tracks state of a boolean.
  • useCounter — tracks state of a number.
  • useList — tracks state of an array.
  • useMap — tracks state of an object.
    
    
• Sensors
  • useBattery — tracks device batter state.
  • useGeolocation — tracks geo location state of user's device.
  • useHover — tracks mouse hover state of some element.
  • useIdle — tracks whether user is being inactive.
  • useLocation — tracks page navigation bar location state.
  • useMedia — tracks state of a CSS media query.
  • useMediaDevices — tracks state of connected hardware devices.
  • useMotion — tracks state of device's motion sensor.
  • useNetwork — tracks state of user's internet connection.
  • useOrientation — tracks state of device's screen orientation.
  • useSize — tracks some HTML element's dimensions.
  • useWindowSize — tracks Window dimensions.
    
    
• Side-effects
  • useCss — dynamically adjusts CSS.
  • useFavicon — sets favicon of the page.
  • useTitle — sets title of the page.
    
    

Usage

• You need to have React 16.7.0-alpha.0 or later installed to use Hooks API.
• You can import each hook individually import useToggle from 'react-use/lib/useToggle'.

License

Unlicense — public domain.

Changelog

11.3.0 (2019-08-25)

Features

• add usePreviousDistinct (#551) (6c3e569)