f / react-use

React Hooks — 👍

👍
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.
  • 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.
    
    
• Lifecycles
  • useLifecycles — calls mount and unmount callbacks.
  • useLogger — logs in console as component goes though life-cycles.
  • useMount — calls mount callbacks.
  • useUnmount — calls unmount callbacks.
    
    
• State
  • createMemo — factory of memoized hooks.
  • useAdopt — extract value from multiple render-prop (or FaCC) components.
  • 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.
  • useRenderProp — extracts value from a render-prop or a FaCC.
  • 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.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.