vue-fns
v0.1.0
Published
Collection of Vue Hooks
Downloads
6
Maintainers
Readme
- Sensors
useBattery
— tracks device battery state. ![][img-demo]useGeolocation
— tracks geo location state of user's device. ![][img-demo]useHover
anduseHoverDirty
— tracks mouse hover state of some element. ![][img-demo]useIdle
— tracks whether user is being inactive.useKey
,useKeyPress
,useKeyboardJs
, anduseKeyPressEvent
— 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
anduseMouseHovered
— 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
— tracksWindow
scroll position. ![][img-demo]useWindowSize
— tracksWindow
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
anduseDropArea
— 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 eachrequestAnimationFrame
.useInterval
anduseHarmonicIntervalFn
— re-renders component on a set interval usingsetInterval
.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 anasync
function.useAsyncFn
— state management for an async functionuseAsyncRetry
—useAsync
withretry()
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 inlocalStorage
.useLockBodyScroll
— lock scrolling of the body element.useRafLoop
— calls given function inside the RAF loop.useSessionStorage
— manages a value insessionStorage
.useThrottle
anduseThrottleFn
— throttles a function. ![][img-demo]useTitle
— sets title of the page.usePermission
— query permission status for browser APIs.
- Lifecycles
useEffectOnce
— a modifieduseEffect
hook that only runs once.useEvent
— subscribe to events.useLifecycles
— callsmount
andunmount
callbacks.useMountedState
anduseRefMounted
— track if component is mounted.usePromise
— resolves promise only while component is mounted.useLogger
— logs in console as component goes through life-cycles.useMount
— callsmount
callbacks.useUnmount
— callsunmount
callbacks.useUpdateEffect
— run aneffect
only on updates.useIsomorphicLayoutEffect
—useLayoutEffect
that does not show warning when server-side rendering.useDeepCompareEffect
— run aneffect
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 isnull
orundefined
.useGetSet
— returns state getterget()
instead of raw state.useGetSetState
— as ifuseGetSet
anduseSetState
had a baby.usePrevious
— returns the previous state or props.useObservable
— tracks latest value of anObservable
.useSetState
— createssetState
method which works likethis.setState
. ![][img-demo]useStateList
— circularly iterates over an array.useToggle
anduseBoolean
— tracks state of a boolean.useCounter
anduseNumber
— tracks state of a number. ![][img-demo]useList
— tracks state of an array.useMap
— tracks state of an object.