Skip to content
Switch branches/tags


Failed to load latest commit information.
Latest commit message
Commit time


React Recipes

A React Hooks utility library containing popular customized hooks

What's your favorite dish?

Build Status

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

๐Ÿฅ˜ Recipes Documentation

Name Returns Arguments
๐Ÿก useAdjustColor color (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] -
๐Ÿœ useDebounce debouncedValue (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: [])
๐Ÿ useIsClient isClient -
๐Ÿฅง useKeyPress keyPressed (targetKey)
๐Ÿฑ useLocalStorage [storedValue, setValue] (key, initialValue)
๐Ÿ“ useLocation { push, replace, pathname, search } -
๐Ÿ‹ useLockBodyScroll - -
๐Ÿ‰ useMedia value (queries, values, defaultValue)
๐Ÿฅญ useMultiKeyPress keysPressed (targetKey)
๐Ÿ”” useNotification fireNotify (title, options)
๐Ÿฅ‘ useOnClickOutside - (ref, callback)
๐Ÿฅ’ useOnlineStatus onlineStatus -
๐Ÿฟ usePrevious previous (value)
๐Ÿ–จ usePrint { ref, handlePrint } (style = {})
โ“ useQueryParams { getParams, setParams } -
๐Ÿฃ 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 })
๐Ÿ useThrottle throttledValue (value, ms: 250)
๐Ÿท useWhyDidYouUpdate - (name, props)
๐Ÿฅ– useWindowScroll { x, y } -
๐Ÿฅฎ useWindowSize { height, width } (initialWidth, initialHeight)
๐Ÿฅ useWorker worker instance (scriptPath, workerOptions, attributes)