Production-ready hooks for Preact
A lightweight collection of typed, tree-shakeable hooks built specifically for Preact.
Ship Preact features faster with production-ready hooks.
Start with setup, verify behavior in live demos, and copy implementation-ready hook patterns with published TypeScript signatures.
Install
pnpm add @kamod-ch/hooks preactPreview the docs experience
Test a real hook, inspect the exact source, and confirm the API shape before you implement it.
useToggle
Toggle between two real values with explicit state changes.
Layout: list
import { useToggle } from '@kamod-ch/hooks'
export default function UseToggleDemo() {
const [value, actions] = useToggle('list', 'grid')
return (
<div>
<p><strong>Layout:</strong> {value}</p>
<div class="demo-actions">
<button type="button" onClick={actions.toggle}>Toggle</button>
<button type="button" onClick={actions.setLeft}>Set list</button>
<button type="button" onClick={actions.setRight}>Set grid</button>
</div>
</div>
)
}
Focused on practical Preact usage
The library mirrors the real implementation in packages/core and keeps the docs grounded in shippable examples.
Preact-first
Hooks are authored for Preact instead of wrapping a React-focused API surface.
Typed by default
Distributed declarations stay aligned with implementation and generated docs output.
Tree-shakeable exports
Import from the main package or use per-hook subpaths without extra runtime cost.
Browser-native hooks
Storage, observers, fullscreen, WebSocket, and URL state are covered with concrete examples.
Go from overview to code quickly
Use the docs like a template: start with the guide, verify behavior in a demo, then copy the exact source shape you need.
- 01
Read the guide
Install the package, choose an import style, and review SSR notes before implementation.
- 02
Test a live example
Use an interactive demo to validate behavior, defaults, and edge cases before shipping.
- 03
Copy the exact API
Use the page signature and demo source as the baseline for production usage.
Move from overview to implementation details
Start with the guide, scan the full hooks index, or jump directly to the exported utilities.
Start with the docs, then ship faster.
Use the getting-started guide for setup, then jump into the hook pages for demos, signatures, and implementation-ready examples.