react-hook-toolkit 4.0.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +289 -36
- package/dist/chunk1516/chunk1617.d.ts +190 -0
- package/dist/chunk1516/chunk1617.js +408 -0
- package/dist/chunk1516/chunk1718.d.ts +324 -0
- package/dist/chunk1516/chunk1718.js +783 -0
- package/dist/chunk1516/chunk1819.d.ts +90 -0
- package/dist/chunk1516/chunk1819.js +235 -0
- package/dist/chunk1516/chunk1920.d.ts +104 -0
- package/dist/chunk1516/chunk1920.js +274 -0
- package/dist/chunk1516/chunk2021.d.ts +219 -0
- package/dist/chunk1516/chunk2021.js +406 -0
- package/dist/chunk1516/chunk2122.d.ts +77 -0
- package/dist/chunk1516/chunk2122.js +193 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.js +7 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,36 +1,289 @@
|
|
|
1
|
-
|
|
2
|
-
**react-hook-toolkit** package offers a comprehensive set of hooks to simplify React development. It includes hooks for managing state, handling API requests, optimizing performance, and improving user interactions. Key features include data fetching, form handling, local storage management, debouncing/throttling, window size tracking, event listeners, and more. These hooks are designed to enhance productivity by providing reusable, easy-to-use solutions for common tasks.
|
|
3
|
-
|
|
4
|
-
**Note : This lightweight and type-safe package is written in TypeScript and offers full support for all hooks across all modern browsers.**
|
|
5
|
-
|
|
6
|
-
### Installation
|
|
7
|
-
|
|
8
|
-
Install the package:
|
|
9
|
-
|
|
10
|
-
```bash
|
|
11
|
-
npm install react-hook-toolkit
|
|
12
|
-
# or
|
|
13
|
-
pnpm add react-hook-toolkit
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
### **Authors**
|
|
17
|
-
|
|
18
|
-
    
|
|
19
|
-
|
|
20
|
-
### **Browser Support**
|
|
21
|
-
|
|
22
|
-
|  |  |  |  | 
|
|
23
|
-
| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
24
|
-
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
### **Documentation**
|
|
28
|
-
|
|
29
|
-
Comprehensive documentation with step-by-step guides, practical examples, and easy-to-follow explanations to help you quickly understand and use all custom hooks effectively.
|
|
30
|
-
|
|
31
|
-
👉 https://react-hook-toolkit.netlify.app
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
1
|
+
|
|
2
|
+
**react-hook-toolkit** package offers a comprehensive set of hooks to simplify React development. It includes hooks for managing state, handling API requests, optimizing performance, and improving user interactions. Key features include data fetching, form handling, local storage management, debouncing/throttling, window size tracking, event listeners, and more. These hooks are designed to enhance productivity by providing reusable, easy-to-use solutions for common tasks.
|
|
3
|
+
|
|
4
|
+
**Note : This lightweight and type-safe package is written in TypeScript and offers full support for all hooks across all modern browsers.**
|
|
5
|
+
|
|
6
|
+
### Installation
|
|
7
|
+
|
|
8
|
+
Install the package:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install react-hook-toolkit
|
|
12
|
+
# or
|
|
13
|
+
pnpm add react-hook-toolkit
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
### **Authors**
|
|
17
|
+
|
|
18
|
+
    
|
|
19
|
+
|
|
20
|
+
### **Browser Support**
|
|
21
|
+
|
|
22
|
+
|  |  |  |  | 
|
|
23
|
+
| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
24
|
+
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### **Documentation**
|
|
28
|
+
|
|
29
|
+
Comprehensive documentation with step-by-step guides, practical examples, and easy-to-follow explanations to help you quickly understand and use all custom hooks effectively.
|
|
30
|
+
|
|
31
|
+
👉 https://react-hook-toolkit.netlify.app
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Available Hooks
|
|
37
|
+
|
|
38
|
+
### 🔄 State & Data Management
|
|
39
|
+
|
|
40
|
+
| Hook | Description |
|
|
41
|
+
|------|-------------|
|
|
42
|
+
| `useToggle` | Boolean toggle with a stable flip function |
|
|
43
|
+
| `useBoolean` | Boolean with explicit `setTrue` / `setFalse` / `toggle` / `set` |
|
|
44
|
+
| `usePrevious` | Returns the value from the previous render |
|
|
45
|
+
| `useArray` | Array state with push, removeByIndex, clear helpers |
|
|
46
|
+
| `useList` | Array state with rich set/push/removeAt/insertAt/updateAt/clear actions |
|
|
47
|
+
| `useCounter` | Numeric counter with min/max/step bounds and increment/decrement/reset/set |
|
|
48
|
+
| `useMap` | Map data structure as React state with get/set/delete/clear |
|
|
49
|
+
| `useSet` | Set data structure as React state with add/delete/toggle/clear |
|
|
50
|
+
| `useQueue` | FIFO queue with enqueue/dequeue/peek/clear |
|
|
51
|
+
| `useStack` | LIFO stack with push/pop/peek/clear |
|
|
52
|
+
| `useUndo` | Simple undo/redo state stack |
|
|
53
|
+
| `useHistoryState` | Full undo/redo history with past, present, and future arrays |
|
|
54
|
+
| `useHistory` | push/replace/goBack/goForward wrappers around the History API |
|
|
55
|
+
| `useStateWithCallback` | setState that fires a callback after the update is applied |
|
|
56
|
+
| `useMergeState` | Object state with partial merge (like class component setState) |
|
|
57
|
+
| `useResetState` | useState augmented with a reset() that restores the initial value |
|
|
58
|
+
| `useSyncedState` | State synced across browser tabs/windows via BroadcastChannel |
|
|
59
|
+
| `useDerivedState` | Memoized value computed from a source with explicit transform |
|
|
60
|
+
| `usePatch` | Object state with a patch() method for one-level deep partial updates |
|
|
61
|
+
| `usePersistedState` | useState synced to localStorage |
|
|
62
|
+
| `useSafeState` | Suppresses state updates after component unmount |
|
|
63
|
+
| `useRafState` | Batches state updates via requestAnimationFrame |
|
|
64
|
+
| `useForceUpdate` | Returns a function that forces a component re-render |
|
|
65
|
+
| `useGenericReducer` | Factory for creating typed reducers |
|
|
66
|
+
|
|
67
|
+
### 🌐 Fetching & API
|
|
68
|
+
|
|
69
|
+
| Hook | Description |
|
|
70
|
+
|------|-------------|
|
|
71
|
+
| `useAsync` | Runs an async function on mount, tracks status/value/error |
|
|
72
|
+
| `useAsyncCallback` | Imperative async wrapper — isPending/data/error/reset; does not auto-run |
|
|
73
|
+
| `useRequest` | Fetches JSON from a URL, returns `{ data, loading, error }` |
|
|
74
|
+
| `useRequestRetry` | Like `useRequest` with automatic retry on failure |
|
|
75
|
+
| `useAbortFetch` | Fetch with AbortController — auto-cancels on unmount or URL change |
|
|
76
|
+
| `useLazyFetch` | Fetch triggered manually (not on mount) |
|
|
77
|
+
| `usePolling` | Repeatedly calls an async fetcher on a fixed interval |
|
|
78
|
+
| `useOptimisticUpdate` | Applies an optimistic value immediately, rolls back on error |
|
|
79
|
+
| `useInfiniteScroll` | Loads paginated data as the user scrolls to the bottom |
|
|
80
|
+
| `useWebSocket` | Connects to a WebSocket and exposes data/send/isConnected |
|
|
81
|
+
|
|
82
|
+
### ⏱ Timing & Async
|
|
83
|
+
|
|
84
|
+
| Hook | Description |
|
|
85
|
+
|------|-------------|
|
|
86
|
+
| `useDebounce` | Debounced copy of a value |
|
|
87
|
+
| `useDebouncedValue` | Alias for `useDebounce` |
|
|
88
|
+
| `useDebouncedCallback` | Debounced callback function |
|
|
89
|
+
| `useDebouncedState` | State that only updates after the setter hasn't been called for N ms |
|
|
90
|
+
| `useThrottle` | Throttled copy of a value |
|
|
91
|
+
| `useDelay` | Delays propagation of a value by a fixed time |
|
|
92
|
+
| `useInterval` | Runs a callback on a repeating interval |
|
|
93
|
+
| `useTimeout` | Runs a callback once after a delay |
|
|
94
|
+
| `useTimer` | Countdown timer that decrements every second |
|
|
95
|
+
| `useCountUp` | Animates a number from 0 up to a target |
|
|
96
|
+
| `useCountDown` | Animates a number from a start value down to 0 |
|
|
97
|
+
| `useClock` | Returns a live `Date` updated every N milliseconds |
|
|
98
|
+
| `useStopwatch` | Start/stop/reset/lap elapsed-time stopwatch in milliseconds |
|
|
99
|
+
| `useAnimationFrame` | Calls a callback on every rAF frame; returns start/stop/isRunning |
|
|
100
|
+
| `useIdleCallback` | Schedules a callback with requestIdleCallback (setTimeout fallback) |
|
|
101
|
+
| `useAsyncEffect` | useEffect wrapper that accepts an async function with cancellation guard |
|
|
102
|
+
|
|
103
|
+
### 💾 Browser Storage
|
|
104
|
+
|
|
105
|
+
| Hook | Description |
|
|
106
|
+
|------|-------------|
|
|
107
|
+
| `useLocalStorage` | Reads/writes a localStorage key as state |
|
|
108
|
+
| `useSessionStorage` | Reads/writes a sessionStorage key as state |
|
|
109
|
+
| `useCookie` | Reads, writes, and deletes a browser cookie |
|
|
110
|
+
| `useIndexedDB` | Reads all records from an IndexedDB object store |
|
|
111
|
+
| `usePersistedForm` | Form state that auto-saves to localStorage |
|
|
112
|
+
| `usePersistedState` | Generic state synced to localStorage |
|
|
113
|
+
|
|
114
|
+
### 📐 DOM & Layout
|
|
115
|
+
|
|
116
|
+
| Hook | Description |
|
|
117
|
+
|------|-------------|
|
|
118
|
+
| `useWindowSize` | Reactive window width and height |
|
|
119
|
+
| `useResizeObserver` | Observes size changes on a ref'd element |
|
|
120
|
+
| `useMeasure` | Full bounding rect of a ref'd element, updates on resize |
|
|
121
|
+
| `useRect` | Reactive bounding DOMRect via ResizeObserver + scroll — returns `[ref, rect]` |
|
|
122
|
+
| `useScrollPosition` | Current page scroll X/Y |
|
|
123
|
+
| `useScrollDirection` | Whether the user is scrolling `'up'` or `'down'` |
|
|
124
|
+
| `useScrollLock` | Locks/unlocks `document.body` overflow |
|
|
125
|
+
| `useLockBodyScroll` | Locks body scroll and compensates for scrollbar width |
|
|
126
|
+
| `useScrollToTop` | Returns `[isVisible, scrollToTop]` — shows button after threshold |
|
|
127
|
+
| `useScrollIntoView` | Returns ref + function that scrolls the element into the viewport |
|
|
128
|
+
| `useScrollThreshold` | Returns true when page (or element) has scrolled past a pixel offset |
|
|
129
|
+
| `useMousePosition` | Current mouse X/Y relative to the viewport |
|
|
130
|
+
| `useIntersectionObserver` | Tracks whether a ref'd element is visible in the viewport |
|
|
131
|
+
| `useInView` | Convenience `[ref, inView]` wrapper over IntersectionObserver; supports `once` |
|
|
132
|
+
| `useMutationObserver` | Observes DOM mutations on a ref'd element |
|
|
133
|
+
| `useGridLayout` | Tracks CSS grid column and row count of a ref'd element |
|
|
134
|
+
| `useVirtualList` | Windowed (virtual) list — only renders visible items |
|
|
135
|
+
| `useFocusTrap` | Traps keyboard Tab focus within a container (for modals/dialogs) |
|
|
136
|
+
| `useEventListener` | Attaches a single event listener to an element or window |
|
|
137
|
+
| `useEventListeners` | Attaches an event listener with a stable handler ref |
|
|
138
|
+
| `useScript` | Dynamically loads an external script and reports its status |
|
|
139
|
+
| `useCss` | Injects a CSS string into the document head |
|
|
140
|
+
| `useImageLoader` | Tracks loaded/error state of an image src |
|
|
141
|
+
| `useTitle` | Reactively sets `document.title`; optionally restores it on unmount |
|
|
142
|
+
| `useFavicon` | Dynamically updates the page favicon href |
|
|
143
|
+
|
|
144
|
+
### 🎨 UI & Interaction
|
|
145
|
+
|
|
146
|
+
| Hook | Description |
|
|
147
|
+
|------|-------------|
|
|
148
|
+
| `useDarkMode` | Tracks and toggles dark mode preference |
|
|
149
|
+
| `useTheme` | light/dark/system theme with localStorage persistence and `data-theme` attribute |
|
|
150
|
+
| `useBreakpoint` | Named breakpoint (`xs`/`sm`/`md`/`lg`/`xl`/`2xl`) from window width |
|
|
151
|
+
| `useMediaQuery` | Returns true when a CSS media query matches |
|
|
152
|
+
| `useReducedMotion` | Returns true when the user prefers reduced motion |
|
|
153
|
+
| `useRipple` | Material-style ripple effect — returns ripple entries and onMouseDown handler |
|
|
154
|
+
| `useToast` | Toast notification state manager with auto-dismiss |
|
|
155
|
+
| `useModal` | Modal open/close state with body scroll lock |
|
|
156
|
+
| `useContextMenu` | Right-click context menu position state |
|
|
157
|
+
| `useHover` | Tracks hover via mouseenter/mouseleave, returns `[ref, isHovered]` |
|
|
158
|
+
| `useHoverDirty` | Tracks hover via mouseover/mouseout on a ref'd element |
|
|
159
|
+
| `useFocus` | Tracks focus state of a ref'd element with programmatic focus/blur |
|
|
160
|
+
| `useClickAway` | Calls a handler when a click occurs outside a ref'd element |
|
|
161
|
+
| `useLongPress` | Fires a callback after a sustained press (mouse or touch) |
|
|
162
|
+
| `useTouch` | Tracks touchstart/touchmove/touchend coordinates on an element |
|
|
163
|
+
| `useSwiping` | Detects swipe gestures (left/right/up/down) with directional callbacks |
|
|
164
|
+
| `usePointers` | Handles all pointer events and tracks active pointers by pointerId |
|
|
165
|
+
| `useDragAndDrop` | Container + draggable item props with `onDrop(from, to)` callback |
|
|
166
|
+
| `useDragReorder` | Drag-and-drop list reordering |
|
|
167
|
+
| `useFileDropArea` | File drag-drop + input handling with type/size validation |
|
|
168
|
+
| `useSelection` | Returns currently selected text and its bounding DOMRect |
|
|
169
|
+
|
|
170
|
+
### ⌨️ Input & Forms
|
|
171
|
+
|
|
172
|
+
| Hook | Description |
|
|
173
|
+
|------|-------------|
|
|
174
|
+
| `useInput` | Controlled input state with value/onChange/reset and spread-ready `bind` |
|
|
175
|
+
| `useCheckbox` | Controlled checkbox state with toggle and spread-ready `bind` |
|
|
176
|
+
| `useForm` | Basic form values + per-field validation |
|
|
177
|
+
| `useSmartForm` | Form with auto-save to localStorage and dirty tracking |
|
|
178
|
+
| `useFormSubmit` | Wraps an async submit handler with isSubmitting/submitError |
|
|
179
|
+
| `useFormWizard` | Multi-step form wizard with per-step validation |
|
|
180
|
+
| `useFieldArray` | Dynamic field arrays with append/remove/update |
|
|
181
|
+
| `useCrossFieldValidation` | Cross-field validation returning per-field errors |
|
|
182
|
+
| `useValidation` | Standalone field validation with an array of validator functions |
|
|
183
|
+
| `useSearch` | Search query state with filtered results and optional debounce |
|
|
184
|
+
| `useFilter` | Filters an array by a predicate function |
|
|
185
|
+
| `useSort` | Sorts an array by key with direction toggling |
|
|
186
|
+
| `useAutocomplete` | Suggestions list with keyboard navigation (Up/Down/Enter/Escape) |
|
|
187
|
+
|
|
188
|
+
### 🧭 Navigation & Routing
|
|
189
|
+
|
|
190
|
+
| Hook | Description |
|
|
191
|
+
|------|-------------|
|
|
192
|
+
| `useRouter` | Minimal client-side router with pathname, searchParams, and navigate |
|
|
193
|
+
| `useNavigationState` | Tracks pathname/search/state from pushState/popstate |
|
|
194
|
+
| `useHistoryState` | Undo/redo state with full history (past/present/future) |
|
|
195
|
+
| `useMenuNavigation` | Flattens nested menu data and handles path-based selection |
|
|
196
|
+
| `useHash` | Reads and writes the URL hash fragment as state |
|
|
197
|
+
| `useQueryParams` | Reads and writes URL search parameters reactively |
|
|
198
|
+
| `useParams` | Extracts named dynamic route parameters from the current URL path |
|
|
199
|
+
| `usePagination` | Client-side pagination: page, pageSize, totalPages, offset, next/prev/goTo |
|
|
200
|
+
|
|
201
|
+
### 🔐 Auth & Permissions
|
|
202
|
+
|
|
203
|
+
| Hook | Description |
|
|
204
|
+
|------|-------------|
|
|
205
|
+
| `usePermission` | Queries the Permissions API for a descriptor |
|
|
206
|
+
|
|
207
|
+
### 📡 Browser & Device
|
|
208
|
+
|
|
209
|
+
| Hook | Description |
|
|
210
|
+
|------|-------------|
|
|
211
|
+
| `useBattery` | Battery level, charging state, and charge/discharge times |
|
|
212
|
+
| `useGeoLocation` | Current geolocation position |
|
|
213
|
+
| `useOnlineStatus` | Whether the browser is online |
|
|
214
|
+
| `useNetwork` | Network info: effectiveType, downlink, rtt, saveData |
|
|
215
|
+
| `useNetworkState` | Full NetworkInformation API with `since` timestamp |
|
|
216
|
+
| `useOrientation` | Device screen orientation type/angle with isPortrait/isLandscape |
|
|
217
|
+
| `usePreferredLanguage` | Navigator language and languages list |
|
|
218
|
+
| `useIdle` | Detects user inactivity after a configurable timeout |
|
|
219
|
+
| `usePageVisibility` | Returns true when the current browser tab is visible |
|
|
220
|
+
| `useBrowser` | Full browser controls: navigate, reload, fullscreen, clipboard, share, and more |
|
|
221
|
+
| `useFullscreen` | Fullscreen API for a ref'd element with enter/exit/toggle |
|
|
222
|
+
| `useMediaDevices` | getUserMedia access + device enumeration for camera and microphone |
|
|
223
|
+
| `useAudioAnalyser` | Real-time audio frequency and time-domain data via AnalyserNode |
|
|
224
|
+
| `useScreenCapture` | Screen/window/tab capture via getDisplayMedia |
|
|
225
|
+
| `useGamepad` | Polls Gamepad API state on every rAF frame |
|
|
226
|
+
| `useNotification` | Web Notifications API — request permission and show notifications |
|
|
227
|
+
| `useVibration` | Vibration API — trigger device vibration with a pattern |
|
|
228
|
+
| `useWakeLock` | Screen Wake Lock API — prevents screen from sleeping |
|
|
229
|
+
| `useShareSheet` | Web Share API — triggers the native OS share sheet |
|
|
230
|
+
| `useMotion` | Device motion sensor (acceleration, rotation rate) |
|
|
231
|
+
| `useWorker` | Runs a function in a Web Worker background thread |
|
|
232
|
+
|
|
233
|
+
### 🗣 Speech & Audio
|
|
234
|
+
|
|
235
|
+
| Hook | Description |
|
|
236
|
+
|------|-------------|
|
|
237
|
+
| `useSpeech` | Text-to-speech via the SpeechSynthesis API (declarative) |
|
|
238
|
+
| `useSpeak` | Text-to-speech with imperative speak/stop/pause/resume controls |
|
|
239
|
+
| `useVoice` | Speech recognition with command matching, history, wake word, and shortcuts |
|
|
240
|
+
| `useSound` | HTML audio player with play/pause/stop/setVolume controls |
|
|
241
|
+
|
|
242
|
+
### 🔁 Lifecycle & Utilities
|
|
243
|
+
|
|
244
|
+
| Hook | Description |
|
|
245
|
+
|------|-------------|
|
|
246
|
+
| `useIsMounted` | Returns true after the component mounts |
|
|
247
|
+
| `useIsFirstRender` | Returns true only on the very first render |
|
|
248
|
+
| `useUnmountedRef` | Ref that becomes true after the component unmounts |
|
|
249
|
+
| `useUpdateEffect` | Like useEffect but skips the first (mount) run |
|
|
250
|
+
| `useIsomorphicEffect` | useLayoutEffect on the browser, useEffect on the server (SSR-safe) |
|
|
251
|
+
| `useBeforeUnload` | Prompts the user before leaving the page |
|
|
252
|
+
| `usePageLeave` | Fires a callback when the mouse leaves the page |
|
|
253
|
+
| `useVisibilityChange` | Returns true when the browser tab is visible |
|
|
254
|
+
| `useLatest` | Ref that always holds the most recent value — avoids stale closures |
|
|
255
|
+
| `useEventCallback` | Stable callback ref — safe for event listeners without re-subscribing |
|
|
256
|
+
| `useStableCallback` | Semantic alias for useEventCallback |
|
|
257
|
+
| `useConstant` | Evaluates an initializer once and never recomputes it |
|
|
258
|
+
| `useComputed` | Memoized derived value — semantic alias for useMemo |
|
|
259
|
+
| `useDeepCompareEffect` | useEffect with deep equality dep comparison |
|
|
260
|
+
| `useDeepCompareMemo` | useMemo with deep equality dep comparison |
|
|
261
|
+
| `useShallowEqual` | Returns the previous (stable) reference when value is shallowly equal |
|
|
262
|
+
| `useStepper` | Step wizard with next/back/reset/goto and isFirstStep/isLastStep |
|
|
263
|
+
| `useRecentSearch` | Persists and manages a recent-searches list in localStorage |
|
|
264
|
+
| `useEventEmitter` | In-component pub/sub: on/off/emit/once/clear |
|
|
265
|
+
| `useClipboard` | Copy text to the clipboard with a copied state |
|
|
266
|
+
| `useScrollIntoView` | Returns ref + scrollIntoView() function |
|
|
267
|
+
|
|
268
|
+
### 🛠 Context & Optimization
|
|
269
|
+
|
|
270
|
+
| Hook | Description |
|
|
271
|
+
|------|-------------|
|
|
272
|
+
| `createOptimizedContext` | Creates a context with a selector-based hook to avoid unnecessary re-renders |
|
|
273
|
+
| `useDrawer` | Consumes the DrawerContext (open/close/state) |
|
|
274
|
+
|
|
275
|
+
### 🐛 Developer Tools
|
|
276
|
+
|
|
277
|
+
| Hook | Description |
|
|
278
|
+
|------|-------------|
|
|
279
|
+
| `useWhyDidYouUpdate` | Logs which props/state changed to trigger the last render (dev only) |
|
|
280
|
+
| `useLogger` | Logs a label and values on every render (dev only) |
|
|
281
|
+
| `useRenderCount` | Returns the number of times the component has rendered |
|
|
282
|
+
| `useErrorBoundary` | Imperative showBoundary(error) to surface errors to the nearest ErrorBoundary |
|
|
283
|
+
| `useReducerLogger` | Wraps useReducer to log every action and state change (dev only) |
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
**License**
|
|
288
|
+
|
|
289
|
+
[MIT](https://docs.npmjs.com/policies/npm-license) © (2022-2024)
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
|
+
interface UseCounterOptions {
|
|
3
|
+
min?: number;
|
|
4
|
+
max?: number;
|
|
5
|
+
step?: number;
|
|
6
|
+
}
|
|
7
|
+
interface UseCounterReturn {
|
|
8
|
+
count: number;
|
|
9
|
+
increment: () => void;
|
|
10
|
+
decrement: () => void;
|
|
11
|
+
reset: () => void;
|
|
12
|
+
set: (value: number) => void;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Manages a numeric counter with optional min/max bounds and a configurable step.
|
|
16
|
+
*/
|
|
17
|
+
export declare function useCounter(initialValue?: number, options?: UseCounterOptions): UseCounterReturn;
|
|
18
|
+
interface UseMapReturn<K, V> {
|
|
19
|
+
map: Map<K, V>;
|
|
20
|
+
set: (key: K, value: V) => void;
|
|
21
|
+
get: (key: K) => V | undefined;
|
|
22
|
+
has: (key: K) => boolean;
|
|
23
|
+
delete: (key: K) => void;
|
|
24
|
+
clear: () => void;
|
|
25
|
+
size: number;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Manages a Map data structure as React state with stable action methods.
|
|
29
|
+
*/
|
|
30
|
+
export declare function useMap<K, V>(initialEntries?: Iterable<[K, V]>): UseMapReturn<K, V>;
|
|
31
|
+
interface UseSetReturn<T> {
|
|
32
|
+
set: Set<T>;
|
|
33
|
+
add: (value: T) => void;
|
|
34
|
+
has: (value: T) => boolean;
|
|
35
|
+
delete: (value: T) => void;
|
|
36
|
+
toggle: (value: T) => void;
|
|
37
|
+
clear: () => void;
|
|
38
|
+
size: number;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Manages a Set data structure as React state with stable action methods.
|
|
42
|
+
*/
|
|
43
|
+
export declare function useSet<T>(initialValues?: Iterable<T>): UseSetReturn<T>;
|
|
44
|
+
interface UseQueueReturn<T> {
|
|
45
|
+
queue: T[];
|
|
46
|
+
enqueue: (item: T) => void;
|
|
47
|
+
dequeue: () => T | undefined;
|
|
48
|
+
peek: () => T | undefined;
|
|
49
|
+
clear: () => void;
|
|
50
|
+
size: number;
|
|
51
|
+
isEmpty: boolean;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Manages a FIFO queue as React state.
|
|
55
|
+
*/
|
|
56
|
+
export declare function useQueue<T>(initialItems?: T[]): UseQueueReturn<T>;
|
|
57
|
+
interface UseStackReturn<T> {
|
|
58
|
+
stack: T[];
|
|
59
|
+
push: (item: T) => void;
|
|
60
|
+
pop: () => T | undefined;
|
|
61
|
+
peek: () => T | undefined;
|
|
62
|
+
clear: () => void;
|
|
63
|
+
size: number;
|
|
64
|
+
isEmpty: boolean;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Manages a LIFO stack as React state.
|
|
68
|
+
*/
|
|
69
|
+
export declare function useStack<T>(initialItems?: T[]): UseStackReturn<T>;
|
|
70
|
+
interface UseFocusReturn {
|
|
71
|
+
ref: MutableRefObject<HTMLElement | null>;
|
|
72
|
+
isFocused: boolean;
|
|
73
|
+
focus: () => void;
|
|
74
|
+
blur: () => void;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Tracks focus state of a DOM element via a ref.
|
|
78
|
+
*/
|
|
79
|
+
export declare function useFocus(): UseFocusReturn;
|
|
80
|
+
/**
|
|
81
|
+
* Tracks whether a DOM element is being hovered via a ref.
|
|
82
|
+
* Returns a [ref, isHovered] tuple.
|
|
83
|
+
*/
|
|
84
|
+
export declare function useHover<T extends HTMLElement = HTMLElement>(): [MutableRefObject<T | null>, boolean];
|
|
85
|
+
interface UseIntersectionObserverOptions extends IntersectionObserverInit {
|
|
86
|
+
freezeOnceVisible?: boolean;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Observes whether a ref'd element is intersecting the viewport (or a given root).
|
|
90
|
+
* When freezeOnceVisible is true the entry is frozen after first intersection.
|
|
91
|
+
*/
|
|
92
|
+
export declare function useIntersectionObserver(elementRef: MutableRefObject<Element | null>, options?: UseIntersectionObserverOptions): IntersectionObserverEntry | undefined;
|
|
93
|
+
interface DOMRect {
|
|
94
|
+
x: number;
|
|
95
|
+
y: number;
|
|
96
|
+
width: number;
|
|
97
|
+
height: number;
|
|
98
|
+
top: number;
|
|
99
|
+
right: number;
|
|
100
|
+
bottom: number;
|
|
101
|
+
left: number;
|
|
102
|
+
}
|
|
103
|
+
interface UseMeasureReturn {
|
|
104
|
+
ref: MutableRefObject<HTMLElement | null>;
|
|
105
|
+
rect: DOMRect;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Measures the bounding rect of a DOM element, updating on resize.
|
|
109
|
+
*/
|
|
110
|
+
export declare function useMeasure(): UseMeasureReturn;
|
|
111
|
+
interface NetworkState {
|
|
112
|
+
isOnline: boolean;
|
|
113
|
+
effectiveType: string | null;
|
|
114
|
+
downlink: number | null;
|
|
115
|
+
rtt: number | null;
|
|
116
|
+
saveData: boolean | null;
|
|
117
|
+
type: string | null;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Returns detailed network connection information including online status,
|
|
121
|
+
* effective connection type, downlink speed, and RTT.
|
|
122
|
+
*/
|
|
123
|
+
export declare function useNetwork(): NetworkState;
|
|
124
|
+
/**
|
|
125
|
+
* Reads and writes the URL hash (fragment) as state.
|
|
126
|
+
* Returns [hash, setHash] where hash does not include the leading '#'.
|
|
127
|
+
*/
|
|
128
|
+
export declare function useHash(): [string, (hash: string) => void];
|
|
129
|
+
/**
|
|
130
|
+
* Returns a ref that always holds the most recent value.
|
|
131
|
+
* Useful for reading the latest prop/state inside a callback without
|
|
132
|
+
* adding it to the dependency array.
|
|
133
|
+
*/
|
|
134
|
+
export declare function useLatest<T>(value: T): MutableRefObject<T>;
|
|
135
|
+
/**
|
|
136
|
+
* Returns a stable callback reference that always delegates to the latest
|
|
137
|
+
* version of the provided function. Safe to pass to event listeners without
|
|
138
|
+
* causing unnecessary re-subscriptions.
|
|
139
|
+
*/
|
|
140
|
+
export declare function useEventCallback<T extends (...args: any[]) => any>(fn: T): T;
|
|
141
|
+
/**
|
|
142
|
+
* A drop-in replacement for useState that suppresses state updates after the
|
|
143
|
+
* component has unmounted, preventing "Can't perform a React state update on an
|
|
144
|
+
* unmounted component" warnings.
|
|
145
|
+
*/
|
|
146
|
+
export declare function useSafeState<T>(initialState: T | (() => T)): [T, React.Dispatch<React.SetStateAction<T>>];
|
|
147
|
+
/**
|
|
148
|
+
* Identical to useState but batches updates via requestAnimationFrame,
|
|
149
|
+
* reducing the number of renders for rapidly changing values (e.g. mouse
|
|
150
|
+
* position, scroll events).
|
|
151
|
+
*/
|
|
152
|
+
export declare function useRafState<T>(initialState: T | (() => T)): [T, React.Dispatch<React.SetStateAction<T>>];
|
|
153
|
+
interface UseTitleOptions {
|
|
154
|
+
restoreOnUnmount?: boolean;
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* Sets the document title reactively. Optionally restores the previous title
|
|
158
|
+
* on unmount.
|
|
159
|
+
*/
|
|
160
|
+
export declare function useTitle(title: string, options?: UseTitleOptions): void;
|
|
161
|
+
/**
|
|
162
|
+
* Dynamically updates the page favicon by href. Useful for notifications or
|
|
163
|
+
* theme changes (e.g. switching between light/dark favicon).
|
|
164
|
+
*/
|
|
165
|
+
export declare function useFavicon(href: string): void;
|
|
166
|
+
/**
|
|
167
|
+
* Debug hook that logs which prop/state changes triggered the last render.
|
|
168
|
+
* Only active in development; no-ops in production.
|
|
169
|
+
* Pass a label and the component's props/state object.
|
|
170
|
+
*/
|
|
171
|
+
export declare function useWhyDidYouUpdate(name: string, props: Record<string, any>): void;
|
|
172
|
+
interface UseFullscreenReturn {
|
|
173
|
+
ref: MutableRefObject<HTMLElement | null>;
|
|
174
|
+
isFullscreen: boolean;
|
|
175
|
+
enter: () => Promise<void>;
|
|
176
|
+
exit: () => Promise<void>;
|
|
177
|
+
toggle: () => Promise<void>;
|
|
178
|
+
isSupported: boolean;
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Manages the Fullscreen API for a specific element (or the whole document when
|
|
182
|
+
* no ref target is provided). Tracks fullscreen state reactively.
|
|
183
|
+
*/
|
|
184
|
+
export declare function useFullscreen(): UseFullscreenReturn;
|
|
185
|
+
/**
|
|
186
|
+
* Logs the component name and any values passed on every render.
|
|
187
|
+
* Only logs in development mode.
|
|
188
|
+
*/
|
|
189
|
+
export declare function useLogger(name: string, ...values: any[]): void;
|
|
190
|
+
export {};
|