๐
react-use
Collection of essential React Hooks.
Port of
libreact
to React Hooks. See demos.
npm i react-use
Reference
- Sensors
useBattery
โ tracks device battery 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
โ tracksWindow
dimensions.
- UI
- Animations
useRaf
โ re-renders component on eachreaquestAnimationFrame
.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.
- Side-effects
useAsync
โ resolves anasync
function.useCss
โ dynamically adjusts CSS.useFavicon
โ sets favicon of the page.useTitle
โ sets title of the page.
- Lifecycles
useLifecycles
โ callsmount
andunmount
callbacks.useLogger
โ logs in console as component goes though life-cycles.useMount
โ callsmount
callbacks.useUnmount
โ callsunmount
callbacks.
- State
useObservable
โ tracks latest value of anObservable
.useSetState
โ createssetState
method which works likethis.setState
.useToggle
โ tracks state of a boolean.useCounter
โ 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.