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 = {}) |
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) |