A list of React Hooks utility library containing popular customized hooks

Sep 16, 2021
A list of React Hooks utility library containing popular customized hooks

React Recipes

A React Hooks utility library containing popular customized hooks.

npm i react-recipes --save
yarn add react-recipes

๐Ÿฅ˜ Recipes Documentation

๐Ÿก useAdjustColorcolor(percentage, color1, color2: null, linearBlend: false)
๐ŸฅŸ useArray{ value, setValue, removeById, removeIndex, clear }(initialValue)
๐Ÿ”„ useAsync{ error, execute, pending, value }(asyncFunction, immediate: true)
๐Ÿช useCookie[cookieValue, updateCookie, deleteCookie](cookieName, initialValue)
๐Ÿฅ  useCopyClipboard[isCopied, setIsCopied](duration: 2000)
๐Ÿฉ useDarkMode[enabled, setEnabledState]-
๐Ÿœ useDebouncedebouncedValue(value, delay)
๐Ÿฅก useDimensions[ref, dimensions, node](liveMeasure: true, delay: 250, initialDimensions: {}, effectDependencies: [])
๐Ÿณ useEventListener-(eventName, handle, element: window)
๐ŸŒฎ useFullScreen{ fullScreen, open, close, toggle }(element: document.documentElement)
๐ŸŒฏ useGeolocation{ latitude, longitude, timestamp, accuracy, error }(watch: false, settings: {enableHighAccuracy: false, timeout: Infinity, maximumAge: 0})
๐ŸŒญ useHover[callbackRef, value]-
๐Ÿฆ useInterval-(callback, delay, runOnLoad: false, effectDependencies: [])
๐Ÿ useIsClientisClient-
๐Ÿฅง useKeyPresskeyPressed(targetKey)
๐Ÿฑ useLocalStorage[storedValue, setValue](key, initialValue)
๐Ÿ‹ useLockBodyScroll--
๐Ÿ‰ useMediavalue(queries, values, defaultValue)
๐Ÿฅญ useMultiKeyPresskeysPressed(targetKey)
๐Ÿ”” useNotificationfireNotify(title, options)
๐Ÿฅ‘ useOnClickOutside-(ref, callback)
๐Ÿฅ’ useOnlineStatusonlineStatus-
๐Ÿฟ usePreviousprevious(value)
๐Ÿฃ useScript[loaded, error](src)
๐Ÿ– useSpeechRecognition{ supported, listen, listening, stop }({ onEnd, onResult, onError })
๐Ÿ— useSpeechSynthesis{ supported, speak, speaking, cancel, voices, pause, resume }({ onEnd, onResult, onError, onBoundary, onPause, onResume })
๐Ÿ useThrottlethrottledValue(value, ms: 250)
๐Ÿท useWhyDidYouUpdate-(name, props)
๐Ÿฅ– useWindowScroll{ x, y }-
๐Ÿฅฎ useWindowSize{ height, width }(initialWidth, initialHeight)
๐Ÿฅ useWorkerworker instance(scriptPath, workerOptions, attributes)
:pushpin: useLocation{ push, replace, pathname, search }-