A lightweight collection of typed, tree-shakeable hooks built specifically for Preact.
kamod-hooksPreact-first · Typed · Tree-shakeable
Retro docs, modern hooks
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.
78documented hooks
81live demos
0runtime deps in core
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.
LiveReal interactive state
ExactCopy the shown source
TypedMatch the published package
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>
)
}
Why kamod-hooks
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.
How it works
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.
Explore
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.