Skip to content

cloudever/react-use

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

89 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation



πŸ‘
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 β€” tracks Window dimensions.

  • UI
    • useAudio β€” plays audio and exposes its controls.
    • useSpeech β€” synthesizes speech from a text string.

  • Animations
    • useRaf β€” re-renders component on each reaquestAnimationFrame.
    • 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 an async function.
    • useCss β€” dynamically adjusts CSS.
    • useFavicon β€” sets favicon of the page.
    • 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
    • useSetState β€” creates setState method which works like this.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.

About

React Hooks β€” future of React πŸ‘ react-use

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.8%
  • JavaScript 1.2%