@amcinox/hooks
v1.0.1
Published
- ## Sensors
Downloads
11
Readme
Hooks
Sensors
useBattery
— tracks device battery state.useGeolocation
— tracks geo location state of user's device.useHover
anduseHoverDirty
— tracks mouse hover state of some element.useHash
— tracks location hash value.useIdle
— tracks whether user is being inactive.useIntersection
— tracks an HTML element's intersection.useKey
,useKeyPress
, useKeyboardJs, and useKeyPressEvent — track keys.useLocation
anduseSearchParam
— tracks page navigation bar location state.useLongPress
— tracks long press gesture of some element.useMedia
— tracks state of a CSS media query.useMediaDevices
— tracks state of connected hardware devices.useMotion
— tracks state of device's motion sensor.useMouse
anduseMouseHovered
— tracks state of mouse position.useMouseWheel
— tracks deltaY of scrolled mouse wheel.useNetworkState
— tracks the state of browser's network connection.useOrientation
— tracks state of device's screen orientation.usePageLeave
— triggers when mouse leaves page boundaries.useScratch
— tracks mouse click-and-scrub state.useScroll
— tracks an HTML element's scroll position.useScrolling
— tracks whether HTML element is scrolling.useStartTyping
— detects when user starts typing.useWindowScroll
— tracks Window scroll position.useWindowSize
— tracks Window dimensions.useMeasure
anduseSize
— tracks an HTML element's dimensions.createBreakpoint
— tracks innerWidthuseScrollbarWidth
— detects browser's native scrollbars width.usePinchZoom
— tracks pointer events to detect pinch zoom in and out status.
UI
useAudio
— plays audio and exposes its controls.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.useSlider
— provides slide behavior over any HTML element.useSpeech
— synthesizes speech from a text string.useVibrate
— provide physical feedback using the Vibration API.useVideo
— plays video, tracks its state, and exposes playback controls.
Animations
useRaf
— re-renders component on each requestAnimationFrame.useInterval
anduseHarmonicIntervalFn
— 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.useTween
— re-renders component, while tweening a number from 0 to 1.useUpdate
— returns a callback, which re-renders component when called.
Side-effects
useAsync
,useAsyncFn
, anduseAsyncRetry
— resolves an async function.useBeforeUnload
— shows browser alert when user try to reload or close the page.useCookie
— provides way to read, update and delete a cookie.useCopyToClipboard
— copies text to clipboard.useDebounce
— debounces a function.useError
— error dispatcher.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.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
— calls mount and unmount callbacks.useMountedState
anduseUnmountPromise
— 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 that works on server.useDeepCompareEffect
,useShallowCompareEffect
, anduseCustomCompareEffect
State
createMemo
— factory of memoized hooks.createReducer
— factory of reducer hooks with custom middleware.createReducerContext
and createStateContext — factory of hooks for a sharing state between components.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.useLatest
— returns the latest state or propsusePrevious
— returns the previous state or props.usePreviousDistinct
— like usePrevious but with a predicate to determine if previous should update.useObservable
— tracks latest value of an Observable.useRafState
— creates setState method which only updates after requestAnimationFrame.useSetState
— creates setState method which works like this.setState.useStateList
— circularly iterates over an array.useToggle
anduseBoolean
— tracks state of a boolean.useCounter
anduseNumber
— tracks state of a number.useList
and useUpsert — tracks state of an array.useMap
— tracks state of an object.useSet
— tracks state of a Set.useQueue
— implements simple queue.useStateValidator
— tracks state of an object.useStateWithHistory
— stores previous state values and provides handles to travel through them.useMultiStateValidator
— alike the useStateValidator, but tracks multiple states at a time.useMediatedState
— like the regular useState but with mediation by custom function.useFirstMountState
— check if current render is first.useRendersCount
— count component renders.createGlobalState
— cross component shared state.useMethods
— neat alternative to useReducer.
Miscellaneous
useEnsuredForwardedRef
andensuredForwardRef
— use a React.forwardedRef safely.