react-reuse-hooks

v3.0.0

Published

6 months ago

A collection of 30+ production-ready reusable React hooks for web apps, covering state, effects, media, forms, and utilities.

⚛️ react-reuse-hooks

A lightweight and powerful collection of 28+ reusable custom React hooks to supercharge your development. Simplify your logic for state management, side effects, performance optimizations, form handling, storage, and more — all in one compact package.

Created with ❤️ by Rahul Chaurasia

📦 Installation

npm install react-reuse-hooks
# or
yarn add react-reuse-hooks

📚 Hook Usage Summary Table

| Hook | ---------------------- | useLocalStorage | useDebounce | useToggle | useClickOutside | useThrottle | usePrevious | useTimeout | useUpdateEffect | useHover | useOnlineStatus | useCopyToClipboard | useClipboard | useDarkMode | useScrollPosition | useWindowSize | useEventListener | useOnScreen | useWhyDidYouUpdate | useFocus | useGeolocation | useElementSize | useDeviceOrientation | useForceUpdate | useInput | useStateWithCallback | useSessionStorage | useKeyPress | useCookie | Description | Example Usage | | ------------------------------ | ---------------------------------------------------------------- | | Sync state with localStorage | const [value, setValue] = useLocalStorage('key', 'default') | | Debounce a value | const debounced = useDebounce(inputValue, 500) | | Toggle a boolean | const [isOn, toggle] = useToggle(false) | | Detect outside clicks | useClickOutside(ref, () => alert('Clicked outside!')) | | Throttle a value update | const throttled = useThrottle(inputValue, 300) | | Get previous value | const prev = usePrevious(value) | | Run function after delay | useTimeout(() => alert('Hello'), 1000) | | Effect only on update | useUpdateEffect(() => {}, [count]) | | Detect hover | const [ref, hovered] = useHover() | | Track online status | const online = useOnlineStatus() | | Copy text to clipboard | const [copied, copy] = useCopyToClipboard() | | Also allows clipboard copying | const [copied, setClipboard] = useClipboard() | | Toggle dark mode | const [darkMode, toggleDarkMode] = useDarkMode() | | Get scroll position | const pos = useScrollPosition() | | Get window size | const { width, height } = useWindowSize() | | Add event listener | useEventListener('resize', handleResize) | | Detect element visibility | const visible = useOnScreen(ref) | | Debug re-renders | useWhyDidYouUpdate('MyComponent', props) | | Handle focus state | const [ref, focused] = useFocus() | | Get geolocation | const { latitude, longitude } = useGeolocation() | | Get element dimensions | const [ref, size] = useElementSize() | | Get device orientation data | const { alpha, beta, gamma } = useDeviceOrientation() | | Force re-render | const forceUpdate = useForceUpdate() | | Manage input field logic | const { value, onChange, reset } = useInput() | | State with callback on update | const [count, setCount] = useStateWithCallback(0, cb) | | Use session storage like state | const [data, setData] = useSessionStorage('key', initialValue) | | Detect specific key press | const isEnter = useKeyPress('Enter') | | Manage browser cookies | const [cookie, setCookie] = useCookie('user') |

📚 My Bestselling Tech Books on Amazon Kindle

Supercharge your React and JavaScript knowledge with these practical, interview-focused books by Rahul Chaurasia. 🚀 600+ developers have already leveled up their skills — now it's your turn!