https://github.com/craig1123/react-recipes
👩🍳 A list of React Hooks utility library containing popular customized hooks
https://github.com/craig1123/react-recipes
custom-hooks customized-hooks hooks react react-components react-hooks react-recipes
Last synced: 6 months ago
JSON representation
👩🍳 A list of React Hooks utility library containing popular customized hooks
- Host: GitHub
- URL: https://github.com/craig1123/react-recipes
- Owner: craig1123
- License: mit
- Created: 2019-10-25T02:01:29.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-02T03:40:33.000Z (8 months ago)
- Last Synced: 2025-04-14T10:22:16.768Z (7 months ago)
- Topics: custom-hooks, customized-hooks, hooks, react, react-components, react-hooks, react-recipes
- Language: JavaScript
- Homepage:
- Size: 1.68 MB
- Stars: 1,036
- Watchers: 13
- Forks: 68
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-hooks - react-recipes - 👩🍳 A list of React Hooks utility library containing popular customized hooks (Packages)
- awesome-react-hooks-cn - `react-recipes`
- awesome-react-hooks - `react-recipes`
- fucking-awesome-react-hooks - `react-recipes`
- awesome-react-hooks - `react-recipes`
README
React Recipes
A React Hooks utility library containing popular customized hooks
What's your favorite dish?
[](https://travis-ci.com/craig1123/react-recipes)
```bash
npm i react-recipes --save
```
```bash
yarn add react-recipes
```
## 🥘 Recipes Documentation
| Name | Returns | Arguments |
| ----------------------------------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| 🍡 [`useAdjustColor`](./docs/useAdjustColor.md) | color | (percentage, color1, color2: null, linearBlend: false) |
| 🥟 [`useArray`](./docs/useArray.md) | { value, setValue, removeById, removeIndex, clear } | (initialValue) |
| 🔄 [`useAsync`](./docs/useAsync.md) | { error, execute, pending, value } | (asyncFunction, immediate: true) |
| 🍪 [`useCookie`](./docs/useCookie.md) | [cookieValue, updateCookie, deleteCookie] | (cookieName, initialValue) |
| 🥠 [`useCopyClipboard`](./docs/useCopyClipboard.md) | [isCopied, setIsCopied] | (duration: 2000) |
| 🍩 [`useDarkMode`](./docs/useDarkMode.md) | [enabled, setEnabledState] | - |
| 🍜 [`useDebounce`](./docs/useDebounce.md) | debouncedValue | (value, delay) |
| 🥡 [`useDimensions`](./docs/useDimensions.md) | [ref, dimensions, node] | (liveMeasure: true, delay: 250, initialDimensions: {}, effectDependencies: []) |
| 🍳 [`useEventListener`](./docs/useEventListener.md) | - | (eventName, handle, element: window) |
| 🌮 [`useFullScreen`](./docs/useFullScreen.md) | { fullScreen, open, close, toggle } | (element: document.documentElement) |
| 🌯 [`useGeolocation`](./docs/useGeolocation.md) | { latitude, longitude, timestamp, accuracy, error } | (watch: false, settings: {enableHighAccuracy: false, timeout: Infinity, maximumAge: 0}) |
| 🌭 [`useHover`](./docs/useHover.md) | [callbackRef, value] | - |
| 🍦 [`useInterval`](./docs/useInterval.md) | - | (callback, delay, runOnLoad: false, effectDependencies: []) |
| 🍐 [`useIsClient`](./docs/useIsClient.md) | isClient | - |
| 🥧 [`useKeyPress`](./docs/useKeyPress.md) | keyPressed | (targetKey) |
| 🍱 [`useLocalStorage`](./docs/useLocalStorage.md) | [storedValue, setValue] | (key, initialValue) |
| 📍 [`useLocation`](./docs/useLocation.md) | { push, replace, pathname, search } | - |
| 🍋 [`useLockBodyScroll`](./docs/useLockBodyScroll.md) | - | - |
| 🍉 [`useMedia`](./docs/useMedia.md) | value | (queries, values, defaultValue) |
| 🥭 [`useMultiKeyPress`](./docs/useMultiKeyPress.md) | keysPressed | (targetKey) |
| 🔔 [`useNotification`](./docs/useNotification.md) | fireNotify | (title, options) |
| 🥑 [`useOnClickOutside`](./docs/useOnClickOutside.md) | - | (ref, callback) |
| 🥒 [`useOnlineStatus`](./docs/useOnlineStatus.md) | onlineStatus | - |
| 🍿 [`usePrevious`](./docs/usePrevious.md) | previous | (value) |
| 🖨 [`usePrint`](./docs/usePrint.md) | { ref, handlePrint } | (style = {}) |
| :question: [`useQueryParams`](./docs/useQueryParams.md) | { getParams, setParams } | - |
| 🍣 [`useScript`](./docs/useScript.md) | [loaded, error] | (src) |
| 🍖 [`useSpeechRecognition`](./docs/useSpeechRecognition.md) | { supported, listen, listening, stop } | ({ onEnd, onResult, onError }) |
| 🍗 [`useSpeechSynthesis`](./docs/useSpeechSynthesis.md) | { supported, speak, speaking, cancel, voices, pause, resume } | ({ onEnd, onResult, onError, onBoundary, onPause, onResume }) |
| 🍏 [`useThrottle`](./docs/useThrottle.md) | throttledValue | (value, ms: 250) |
| 🍷 [`useWhyDidYouUpdate`](./docs/useWhyDidYouUpdate.md) | - | (name, props) |
| 🥖 [`useWindowScroll`](./docs/useWindowScroll.md) | { x, y } | - |
| 🥮 [`useWindowSize`](./docs/useWindowSize.md) | { height, width } | (initialWidth, initialHeight) |
| 🥝 [`useWorker`](./docs/useWorker.md) | worker instance | (scriptPath, workerOptions, attributes)
| 👁 [`useIntersectionObserver`](./docs/useWorker.md) | { ref, isContentVisible } | (options) |