zerone-hooks
v0.0.2
Published
Collection of React Hooks
Readme
- Sensors
useBattery— tracks device battery state. ![][img-demo]useGeolocation— tracks geo location state of user's device. ![][img-demo]useHoveranduseHoverDirty— tracks mouse hover state of some element. ![][img-demo]useHash— tracks location hash value. ![][img-demo]useIdle— tracks whether user is being inactive.useIntersection— tracks an HTML element's intersection. ![][img-demo]useKey,useKeyPress,useKeyboardJs, anduseKeyPressEvent— track keys. ![][img-demo]useLocationanduseSearchParam— tracks page navigation bar location state.useLongPress— tracks long press gesture of some element.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.useMouseanduseMouseHovered— tracks state of mouse position. ![][img-demo]useMouseWheel— tracks deltaY of scrolled mouse wheel. ![][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.useScratch— tracks mouse click-and-scrub state.useScroll— tracks an HTML element's scroll position. ![][img-demo]useScrolling— tracks whether HTML element is scrolling.useStartTyping— detects when user starts typing.useWindowScroll— tracksWindowscroll position. ![][img-demo]useWindowSize— tracksWindowdimensions. ![][img-demo]useMeasureanduseSize— tracks an HTML element's dimensions. ![][img-demo]createBreakpoint— tracksinnerWidthuseScrollbarWidth— detects browser's native scrollbars width. ![][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.useDropanduseDropArea— tracks file, link and copy-paste drops.useFullscreen— display an element or video full-screen. ![][img-demo]useSlider— provides slide behavior over any HTML element. ![][img-demo]useSpeech— synthesizes speech from a text string. ![][img-demo]useVibrate— provide physical feedback using the Vibration API. ![][img-demo]useVideo— plays video, tracks its state, and exposes playback controls. ![][img-demo]
- Animations
useRaf— re-renders component on eachrequestAnimationFrame.useIntervalanduseHarmonicIntervalFn— 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,useAsyncFn, anduseAsyncRetry— resolves anasyncfunction.useBeforeUnload— shows browser alert when user try to reload or close the page.useCookie— provides way to read, update and delete a cookie. ![][img-demo]useCopyToClipboard— copies text to clipboard.useDebounce— debounces a function. ![][img-demo]useError— error dispatcher. ![][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.useThrottleanduseThrottleFn— throttles a function. ![][img-demo]useTitle— sets title of the page.usePermission— query permission status for browser APIs.
- Lifecycles
useEffectOnce— a modifieduseEffecthook that only runs once.useEvent— subscribe to events.useLifecycles— callsmountandunmountcallbacks.useMountedStateanduseUnmountPromise— track if component is mounted.usePromise— resolves promise only while component is mounted.useLogger— logs in console as component goes through life-cycles.useMount— callsmountcallbacks.useUnmount— callsunmountcallbacks.useUpdateEffect— run aneffectonly on updates.useIsomorphicLayoutEffect—useLayoutEffectthat does not show warning when server-side rendering.useDeepCompareEffect,useShallowCompareEffect, anduseCustomCompareEffect— run aneffectdepending on deep comparison of its dependencies
- State
createMemo— factory of memoized hooks.createReducer— factory of reducer hooks with custom middleware.createReducerContextandcreateStateContext— factory of hooks for a sharing state between components.useDefault— returns the default value when state isnullorundefined.useGetSet— returns state getterget()instead of raw state.useGetSetState— as ifuseGetSetanduseSetStatehad a baby.useLatest— returns the latest state or propsusePrevious— returns the previous state or props. ![][img-demo]usePreviousDistinct— likeusePreviousbut with a predicate to determine ifpreviousshould update.useObservable— tracks latest value of anObservable.useRafState— createssetStatemethod which only updates afterrequestAnimationFrame. ![][img-demo]useSetState— createssetStatemethod which works likethis.setState. ![][img-demo]useStateList— circularly iterates over an array. ![][img-demo]useToggleanduseBoolean— tracks state of a boolean. ![][img-demo]useCounteranduseNumber— tracks state of a number. ![][img-demo]useList~anduseUpsert~ — tracks state of an array. ![][img-demo]useMap— tracks state of an object. ![][img-demo]useSet— tracks state of a Set. ![][img-demo]useQueue— implements simple queue.useStateValidator— tracks state of an object. ![][img-demo]useStateWithHistory— stores previous state values and provides handles to travel through them. ![][img-demo]useMultiStateValidator— alike theuseStateValidator, but tracks multiple states at a time. ![][img-demo]useMediatedState— like the regularuseStatebut with mediation by custom function. ![][img-demo]useFirstMountState— check if current render is first. ![][img-demo]useRendersCount— count component renders. ![][img-demo]createGlobalState— cross component shared state.![][img-demo]useMethods— neat alternative touseReducer. ![][img-demo]
- Miscellaneous
useEnsuredForwardedRefandensuredForwardRef— use a React.forwardedRef safely. ![][img-demo]