👍
vue-fns

^{Collection of essential Vue Hooks.}

npm i vue-fns

• Sensors
  • useBattery — tracks device battery state. ![][img-demo]
  • useGeolocation — tracks geo location state of user's device. ![][img-demo]
  • useHover and useHoverDirty — tracks mouse hover state of some element. ![][img-demo]
  • useIdle — tracks whether user is being inactive.
  • useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys. ![][img-demo]
  • useLocation — tracks page navigation bar location state.
  • useMedia — tracks state of a CSS media query. ![][img-demo]
  • useMediaDevices — tracks state of connected hardware devices.
  • useMotion — tracks state of device's motion sensor.
  • useMouse and useMouseHovered — tracks state of mouse position. ![][img-demo]
  • useNetwork — tracks state of user's internet connection.
  • useOrientation — tracks state of device's screen orientation.
  • usePageLeave — triggers when mouse leaves page boundaries.
  • useScroll — tracks an HTML element's scroll position. ![][img-demo]
  • useScrolling — tracks whether HTML element is scrolling.
  • useSize — tracks an HTML element's dimensions.
  • useStartTyping — detects when user starts typing.
  • useWindowScroll — tracks Window scroll position. ![][img-demo]
  • useWindowSize — tracks Window dimensions. ![][img-demo]
    
    
• UI
  • useAudio — plays audio and exposes its controls. ![][img-demo]
  • useClickAway — triggers callback when user clicks outside target area.
  • useCss — dynamically adjusts CSS.
  • useDrop and useDropArea — tracks file, link and copy-paste drops.
  • useFullscreen — display an element or video full-screen. ![][img-demo]
  • useSpeech — synthesizes speech from a text string. ![][img-demo]
  • useVideo — plays video, tracks its state, and exposes playback controls. ![][img-demo]
  • useWait — complex waiting management for UIs.
    
    
• Animations
  • useRaf — re-renders component on each requestAnimationFrame.
  • useInterval and useHarmonicIntervalFn — re-renders component on a set interval using setInterval.
  • useSpring — interpolates number over time according to spring dynamics.
  • useTimeout — re-renders component after a timeout.
  • useTimeoutFn — calls given function after a timeout. ![][img-demo]
  • useTween — re-renders component, while tweening a number from 0 to 1. ![][img-demo]
  • useUpdate — returns a callback, which re-renders component when called.
    
    
• Side-effects
  • useAsync — resolves an async function.
  • useAsyncFn — state management for an async function
  • useAsyncRetry — useAsync with retry() method.
  • useBeforeUnload — shows browser alert when user try to reload or close the page.
  • useCopyToClipboard — copies text to clipboard.
  • useDebounce — debounces a function. ![][img-demo]
  • useFavicon — sets favicon of the page.
  • useLocalStorage — manages a value in localStorage.
  • useLockBodyScroll — lock scrolling of the body element.
  • useRafLoop — calls given function inside the RAF loop.
  • useSessionStorage — manages a value in sessionStorage.
  • useThrottle and useThrottleFn — throttles a function. ![][img-demo]
  • useTitle — sets title of the page.
  • usePermission — query permission status for browser APIs.
    
    
• Lifecycles
  • useEffectOnce — a modified useEffect hook that only runs once.
  • useEvent — subscribe to events.
  • useLifecycles — calls mount and unmount callbacks.
  • useMountedState and useRefMounted — track if component is mounted.
  • usePromise — resolves promise only while component is mounted.
  • useLogger — logs in console as component goes through life-cycles.
  • useMount — calls mount callbacks.
  • useUnmount — calls unmount callbacks.
  • useUpdateEffect — run an effect only on updates.
  • useIsomorphicLayoutEffect — useLayoutEffect that does not show warning when server-side rendering.
  • useDeepCompareEffect — run an effect depending on deep comparison of its dependencies
    
    
• State
  • createMemo — factory of memoized hooks.
  • createReducer — factory of reducer hooks with custom middleware.
  • useDefault — returns the default value when state is null or undefined.
  • useGetSet — returns state getter get() instead of raw state.
  • useGetSetState — as if useGetSet and useSetState had a baby.
  • usePrevious — returns the previous state or props.
  • useObservable — tracks latest value of an Observable.
  • useSetState — creates setState method which works like this.setState. ![][img-demo]
  • useStateList — circularly iterates over an array.
  • useToggle and useBoolean — tracks state of a boolean.
  • useCounter and useNumber — tracks state of a number. ![][img-demo]
  • useList — tracks state of an array.
  • useMap — tracks state of an object.