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.
Port of libreact. See demos.}

npm i react-use

• Sensors
  • useBattery — tracks device battery state.
  • useGeolocation — tracks geo location state of user's device.
  • useHover and useHoverDirty — tracks mouse hover state of some element.
  • useIdle — tracks whether user is being inactive.
  • useKeyPress — tracks whether a keyboard key—or set of keys—was pressed.
  • 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.
    
    
• UI
  • useAudio — plays audio and exposes its controls.
  • useOutsideClick — triggers callback when user clicks outside target area.
  • useSpeech — synthesizes speech from a text string.
  • useVideo — plays video, tracks its state, and exposes playback controls.
  • useWait — complex waiting management for UIs.
    
    
• Animations
  • useRaf — re-renders component on each requestAnimationFrame.
  • useSpring — interpolates number over time according to spring dynamics.
  • useTimeout — returns true after a timeout.
  • useTween — re-renders component, while tweening a number from 0 to 1.
  • useUpdate — returns a callback, which re-renders component when called.
    
    
• Side-effects
  • useAsync — resolves an async function.
  • useCss — dynamically adjusts CSS.
  • useFavicon — sets favicon of the page.
  • useLocalStorage — manages a value in localStorage.
  • useSessionStorage — manages a value in sessionStorage.
  • useTitle — sets title of the page.
  • useDebounce — debounces a function.
    
    
• Lifecycles
  • useLifecycles — calls mount and unmount callbacks.
  • useRefMounted — tracks if component is mounted.
  • useLogger — logs in console as component goes through life-cycles.
  • useMount — calls mount callbacks.
  • useUnmount — calls unmount callbacks.
    
    
• State
  • createMemo — factory of memoized hooks.
  • useCallbag — tracks latest value of a callbag.
  • useGetSet — returns state getter get() instead of raw state.
  • useGetSetState — as if useGetSet and useSetState had a baby.
  • useObservable — tracks latest value of an Observable.
  • useSetState — creates setState method which works like this.setState.
  • useToggle and useBoolean — tracks state of a boolean.
  • useCounter and useNumber — tracks state of a number.
  • useList — tracks state of an array.
  • useMap — tracks state of an object.
    
    

_Usage

You need to have React 16.8.1 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

5.3.1 (2019-02-17)

Bug Fixes

• 🐛 fix typings in useOrientation sensor (afbacac)
• 🐛 fix useSetState after React update (524abe5), closes #107 #107
• useOrientation breaks in some devices (d89bd54)