Hooks Overview
The hooks @termuijs/jsx exports, grouped by what they do. Click a hook name to jump to its detail page where one exists.
Installation
npm install @termuijs/jsx
All hooks are named exports:
import { useState, useInput, useAsync, useInterval } from '@termuijs/jsx'
Async and data
| Hook | Returns | Detail |
|---|
useAsync | { data, loading, error, refetch } | useAsync |
useSubprocess | { run } | , |
Lifecycle
| Hook | Returns | Detail |
|---|
useEffect | void | , |
State
| Hook | Returns | Detail |
|---|
useState | [T, setter] | , |
useReducer | [state, dispatch] | , |
useBoolean | [boolean, actions] | , |
useToggle | [boolean, actions] | , |
useCounter | [number, actions] | , |
useList | [T[], actions] | , |
useMap | [Map<K,V>, actions] | , |
useSet | [Set<T>, actions] | , |
Refs and memoization
| Hook | Returns | Detail |
|---|
useRef | { current: T } | , |
useMemo | T | , |
useCallback | T | , |
useImperativeHandle | void | , |
Timing
| Hook | Returns | Detail |
|---|
useInterval | void | , |
useTimeout | void | , |
useDebounce | T | , |
useThrottle | T | , |
useStopwatch | [elapsed, controls] | , |
useCountdown | [count, controls] | , |
Layout and terminal
| Hook | Returns | Detail |
|---|
useTerminalSize | { cols, rows } | , |
useElementSize | [ref, { width, height }] | , |
Animation and motion
| Hook | Returns | Detail |
|---|
useMotion | { reduced } | useMotion |
Focus management
| Hook | Returns | Detail |
|---|
useFocus | { isFocused } | Focus |
useFocusManager | { focused, focus, blur, FocusContext } | Focus |
useFocusWithin | boolean | Focus |
useFocusTrap | void | Focus |
Context and providers
| Hook | Returns | Detail |
|---|
useContext | T | Context |
System and utilities
| Hook | Returns | Detail |
|---|
useClipboard | { copied, copy, read } | , |
useBell | () => void | , |
useModal | { visible, props, show, hide, dismiss } | , |
useId | string | , |
useInsertBefore | void | , |