README

👍
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.

Usage no npm install needed!

README

👍 vue-fns

👍
vue-fns