ZenUI React Hooks
91 typed, SSR-safe React hooks. Tree-shakeable, zero dependencies.
- Product
- ZenUI React Hooks
- Status
- Active
- Stack
- TypeScript, React, Next.js, tsup
- Updated
- 2026-09-29
The problem
Every React codebase ends up with its own half-tested useDebounce and useLocalStorage. Copies drift, types go missing and edge cases get rediscovered.
The answer
What we built instead.
91 typed React hooks for state, async data, realtime connections, gestures and browser APIs, published on npm as @zenuilabs/react-hooks. Every hook is SSR-safe, tree-shakeable and has zero dependencies, and each one has a live demo, signature and usage example on the docs site.
91 hooks
State, async data, realtime connections, gestures, motion and browser APIs in one package.
SSR-safe
No hook touches browser globals during render, and every hook is server-rendered in tests.
Fully typed
Option and result types are exported with every hook.
Zero dependencies
Tree-shakeable, so you only ship the hooks you import.
How it behaves
From input to result, in 4 moves.
function Search() { const [q, setQ] = useState("") const term = useDebounce(q, 400) const hits = useFetch(term) const sm = useMediaQuery("640px") return <Results items={hits} />}
- ZenUI Library for React
- ZenUI Color Picker
- ZenUI Image React
Install
npm install @zenuilabs/react-hooks
Import
Pick a hook.
Call
Use it in a component.
Compose
Combine hooks into behaviour.
Try it
Try the idea without leaving the page.
A small playground built with browser APIs. It shows the principle; the real tool does far more.
Under the hood
Under the hood.
- Package@zenuilabs/react-hooks on npm · Built with tsup
- LanguageTypeScript
- DocsNext.js static site with live demos
Who it is for
React developers
Replace hand-rolled utility hooks with typed, tested ones.
Next.js teams
Use browser hooks safely in server-rendered apps.
Put ZenUI React Hooks to work.
Works alongside