React Recipes

A React Hooks utility library containing popular customized hooks

What's your favorite dish?

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 = {})
:question: 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)
👁 useIntersectionObserver	{ ref, isContentVisible }	(options)