reactuse

Files (183)

• AGENTS.md
• README.md
• SKILL.md
• metadata.json
• _sections.md · rules/
• _template.md · rules/
• cn.md · rules/
• createContext.md · rules/
• createContextHook.md · rules/
• createEventEmitter.md · rules/
• createReactiveContext.md · rules/
• createSharedHook.md · rules/
• createStore.md · rules/
• makeDestructurable.md · rules/
• target.md · rules/
• useActiveElement.md · rules/
• useAsync.md · rules/
• useAsyncEffect.md · rules/
• useAudio.md · rules/
• useAutoScroll.md · rules/
• useBatchedCallback.md · rules/
• useBattery.md · rules/
• useBluetooth.md · rules/
• useBoolean.md · rules/
• useBreakpoints.md · rules/
• useBroadcastChannel.md · rules/
• useBrowserLanguage.md · rules/
• useBrowserLocation.md · rules/
• useClickOutside.md · rules/
• useClipboard.md · rules/
• useConst.md · rules/
• useContextMenu.md · rules/
• useControllableState.md · rules/
• useCookie.md · rules/
• useCookies.md · rules/
• useCopy.md · rules/
• useCounter.md · rules/
• useCssVar.md · rules/
• useCycleList.md · rules/
• useDebounceCallback.md · rules/
• useDebounceEffect.md · rules/
• useDebounceState.md · rules/
• useDebounceValue.md · rules/
• useDefault.md · rules/
• useDeviceList.md · rules/
• useDeviceMotion.md · rules/
• useDeviceOrientation.md · rules/
• useDevicePixelRatio.md · rules/
• useDidUpdate.md · rules/
• useDisclosure.md · rules/
• useDisplayMedia.md · rules/
• useDocumentEvent.md · rules/
• useDocumentTitle.md · rules/
• useDocumentVisibility.md · rules/
• useDoubleClick.md · rules/
• useDraggable.md · rules/
• useDropZone.md · rules/
• useEvent.md · rules/
• useEventListener.md · rules/
• useEventSource.md · rules/
• …and 123 more

SKILL.md (first lines)

# Reactuse

This skill is a decision-and-implementation guide for reactuse library for react.js / next.js projects. It maps requirements to the most suitable reactuse hook, applies the correct usage pattern, and prefers hook-based solutions over bespoke code to keep implementations concise, maintainable, and performant.

## When to Apply

- Apply this skill whenever assisting development work in React.js / Next.js.
- Always check first whether a reactuse hook can implement the requirement.
- Prefer reactuse hooks over custom code to improve readability, maintainability, and performance.
- Map requirements to the most appropriate hook and follow the hook’s invocation rule.
- Please refer to the `Invocation` field in the hooks table. For example:
  - `AUTO`: Use automatically when applicable.
  - `EXTERNAL`: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
  - `EXPLICIT_ONLY`: Use only when explicitly requested by the user.
    > _NOTE_ User instructions in the prompt or `AGENTS.md` may override a hook’s default `Invocation` rule.

## Hooks

All hooks listed below are part of the [reactuse](https://reactuse.org/) library. Each section categorizes hooks based on their functionality.

IMPORTANT: Each hook entry includes a short `Description` and a detailed `Reference`. When using any hook, always consult the corresponding document in `./references` for usage details and type declarations.

Blocked upstream category: Reactuse also exports `Humor` hooks (`useFul`, `useLess`, `useOnce`) in recent releases. This skill intentionally does not support or recommend them because upstream marks them as jokes or non-production utilities.

### Helpers

| Hook                  | Description                                                     | Invocation |
| --------------------- | --------------------------------------------------------------- | ---------- |
| cn | Normalizes conditional class names for React `className`. | HIGH |
| createContext         | Creates a typed context with provider and selector hook.        | HIGH       |
| createContextHook | Scopes one hook result to a React subtree. | LOW |
| createEventEmitter    | Creates a type-safe event emitter with a subscription hook.     | LOW        |
| createReactiveContext | Creates a typed context selector with optimized updates.        | LOW        |
| createSharedHook | Shares one hook instance across consumers. | LOW |
| createStore           | Creates a external store with state, subscriptions, and a hook. | MEDIUM     |
| makeDestructurable | Supports object and tuple consumption from one value. | LOW |
| target | Wraps DOM targets in the shape Reactuse hooks expect. | MEDIUM |

### Elements

| Hook                | Description                                                | Invocation |
| ------------------- | ---------------------------------------------------------- | ---------- |
| useActiveElement    | Tracks the currently focused element.                      | LOW        |
| useAutoScroll       | Automatically scrolls a container to the bottom.           | LOW        |
| useClickOutside     | Calls a callback when clicking outside the target element. | HIGH       |
| useContextMenu | Converts secondary-click and long-press gestures to menu state. | LOW |
| useDoubleClick      | Detects double-clicks with optional single-click handler.  | MEDIUM     |
| useDraggable | Converts pointer movement into drag position state. | LOW |
| useDropZone         | Creates a drag-and-drop area with file state.              | MEDIUM     |
| useFileDialog       | Opens a file picker and returns selected files.            | LOW        |
| useFocus            | Tracks focus state and provides focus/blur controls.       | MEDIUM     |
| useFocusTrap        | Traps focus within a given element.                        | MEDIUM     |
| useHover            | Tracks hover state for an element.                         | MEDIUM     |
| useImage            | Loads an image in the browser and returns image-specific loading state. | LOW        |
| useLockScroll       | Locks scrolling on an element or the document body.        | MEDIUM     |
| useLongPress        | Detects long press interactions.                           | MEDIUM     |
| usePaint            | Draws on a canvas and exposes drawing controls.            | LOW        |
| useScript           | Loads a script and returns its status.                     | LOW        |
| useSize             | Observes element width and height.                         | LOW        |
| useSticky           | Detects whether a sticky element is stuck.                 | LOW        |
| useTextareaAutosize | Auto-resizes a textarea based on content.                  | MEDIUM     |
| useTextDirection    | Gets and sets the text direction of an element.            | MEDIUM     |
| useWindowFocus      | Returns the current focus state of the window.             | LOW        |
| useWindowSize       | Returns current window width and height.                   | LOW        |

### Async

| Hook            | Description                                                             | Invocation |
| --------------- | ----------------------------------------------------------------------- | ---------- |
| useAsync        | Tracks loading, error, and data state for a promise-returning callback. | MEDIUM     |
| useLockCallback | Prevents a callback from running multiple times simultaneously.         | MEDIUM     |
| useMutation     | Defines mutation logic with loading, error, and success state.          | HIGH       |
| useOptimistic   | Allows showing an optimistic value before the async update resolves.    | MEDIUM     |
| useQuery | Wraps abortable async reads in query state and refresh controls. | HIGH |

### Lifecycle

| Hook                      | Description                                                         | Invocation |
| ------------------------- | ------------------------------------------------------------------- | ---------- |
| useAsyncEffect            | Runs async side effects.                                            | MEDIUM     |
| useDidUpdate              | Runs an effect only on updates (not on initial mount).              | HIGH       |
| useIsFirstRender          | Returns `true` only on the first render.                            | LOW        |
| useIsomorphicLayoutEffect | Uses `useLayoutEffect` on the client and `useEffect` on the server. | HIGH       |
| useMount                  | Runs a callback once when the component mounts.                     | HIGH       |
| useShallowEffect          | Runs an effect only when dependencies change shallowly or deeply.   | LOW        |
| useUnmount                | Runs a callback when the component unmounts.                        | HIGH       |

### Browser

| Hook                  | Description                                                                  | Invocation |
| --------------------- | ---------------------------------------------------------------------------- | ---------- |
| useAudio              | Manages audio playback (play/pause/stop), volume, rate, and sprite segments. | LOW        |
| useBattery            | Returns battery status and support state.                                    | LOW        |
| useBluetooth          | Requests and connects to Bluetooth devices.                                  | LOW        |
| useBreakpoints        | Manages responsive breakpoints and helper predicates.                        | MEDIUM     |
| useBroadcastChannel   | Enables cross-tab/window messaging.                                          | LOW        |
| useBrowserLocation    | Returns reactive location state and history navigation controls.              | MEDIUM     |
| useClipboard          | Reads and copies text from the clipboard.                                    | MEDIUM     |
| useCopy               | Copies text and resets status after a delay.                                 | MEDIUM     |
| useCssVar             | Reads and writes a CSS custom property.                                      | LOW        |
| useDeviceList | Groups available media input and output devices for pickers. | MEDIUM |
| useDisplayMedia | Connects a video element to a screen-capture stream. | LOW |
| useDocumentEvent      | Attaches an event listener to the document.                                  | LOW        |
| useDocumentTitle      | Reads and updates the document title.                                        | LOW        |
| useDocumentVisibility | Returns the document visibility state.                                       | LOW        |
| useEventListener      | Attaches an event listener to a target.                                      | HIGH       |
| useEventSource        | Provides a reactive wrapper around EventSource.                              | LOW        |
| useEyeDropper         | Provides access to the EyeDropper API.                                       | LOW        |
| useFavicon            | Reads and updates the current favicon.                                       | LOW        |
| useFileSystemAccess   | Reads and writes local files via the File System Access API.                 | LOW        |
| useFps                | Measures frames per second.                                                  | LOW        |
| useFullscreen         | Controls fullscreen state for an element.                                    | LOW        |
| useGamepad            | Returns connected gamepads and active status.                                | LOW        |
| useGeolocation | Keeps the latest browser geolocation reading in React state. | MEDIUM |
| useMeasure            | Measures an element's size and position.                                     | LOW        |
| useMediaControls      | Provides controls and state for audio/video elements.                        | LOW        |
| useMediaStream | Connects camera or microphone capture to a media element. | MEDIUM |
| useMediaQuery         | Returns whether a media query matches.                                       | MEDIUM     |
| useMemory             | Returns the current JS heap memory usage.                                    | LOW        |

From siberiacancode/agent-skills, MIT.

More from siberiacancode/agent-skills