React-recipes NPM

npm.io npm.io npm.io

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)