A React Hooks utility library containing popular customized hooks
What's your favorite dish?
npm i react-recipes --saveyarn add react-recipes| 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) |
👁 useIntersectionObserver |
{ ref, isContentVisible } | (options) |