@user-xxy/react-hooks

React hooks for browser apps, distilled from real-world admin, H5, and mini-program projects.

pnpm add @user-xxy/react-hooks
# peer dependency
pnpm add react

API

useIsMobile(maxWidth?)

const isMobile = useIsMobile()
return isMobile ? <Mobile /> : <Desktop />

useToggle(initial?)

const [open, { toggle, setTrue, setFalse }] = useToggle(false)

useWebSocket(options)

const { status, data, send } = useWebSocket<ChatMessage, ChatPayload>({
  url: 'wss://chat.example.com',
  heartbeatInterval: 30_000,
  heartbeatMessage: () => JSON.stringify({ event: 'ping' }),
  onMessage: (msg) => console.log(msg),
})

Heartbeat, auto-reconnect, manual close, and callback refs are built in.

useCountdown(durationMs, options?)

const { remaining, isFinished, start, stop, reset } = useCountdown(60_000)

useLatencyColor(latency)

const color = useLatencyColor(latencyMs)

useLocalStorage(key, defaultValue)

const [token, setToken] = useLocalStorage<string>('token', '')

The hook subscribes to the storage event so multiple tabs stay in sync.

Develop

pnpm install
pnpm typecheck
pnpm build

Publish

Publishing is handled by GitHub Actions:

• npm registry: @user-xxy/react-hooks
• GitHub Packages: @user-xxy/react-hooks

Add an NPM_TOKEN repository secret with publish permission, then either create a GitHub Release or run the Publish packages workflow manually.

License

MIT