Production-ready hooks for Preact | kamod-hooks
Skip to contentTheme
SearchGuideIntroduction<br>Installation<br>Getting started<br>Usage<br>TypeScript<br>SSR and browser APIs<br>Migration from ahooks<br>HooksAll hooks<br>StateuseBoolean<br>useControllableValue<br>useCounter<br>useDynamicList<br>useEventEmitter<br>useEventTarget<br>useGetState<br>useHistoryTravel<br>useMap<br>useRafState<br>useReactive<br>useResetState<br>useSafeState<br>useSelections<br>useSet<br>useSetState<br>useToggle<br>EffectsuseAsyncEffect<br>useCreation<br>useDebounce<br>useDebounceEffect<br>useDebounceFn<br>useDeepCompareEffect<br>useDeepCompareLayoutEffect<br>useLatest<br>useMemoizedFn<br>usePrevious<br>useThrottle<br>useThrottleEffect<br>useThrottleFn<br>useTrackedEffect<br>useUpdate<br>useUpdateEffect<br>useUpdateLayoutEffect<br>useWhyDidYouUpdate<br>LifecycleuseIsomorphicLayoutEffect<br>useMount<br>useUnmount<br>useUnmountedRef<br>DOM and eventsuseClickAway<br>useDrag<br>useDrop<br>useEventListener<br>useFocusWithin<br>useFullscreen<br>useHover<br>useKeyPress<br>useLongPress<br>useMouse<br>useMutationObserver<br>useScroll<br>useSize<br>useTextSelection<br>Browser APIsuseCookieState<br>useDocumentVisibility<br>useExternal<br>useFavicon<br>useInViewport<br>useInfiniteScroll<br>useLocalStorageState<br>useNetwork<br>useResponsive<br>useSessionStorageState<br>useTheme<br>useTitle<br>useUrlState<br>useVirtualList<br>useWebSocket<br>Async and requestsuseAntdTable<br>useFusionTable<br>useLockFn<br>usePagination<br>useRequest<br>TiminguseCountDown<br>useInterval<br>useRafInterval<br>useRafTimeout<br>useTimeout<br>UtilitiesclearCache<br>configResponsive<br>createUpdateEffect
Production-ready hooks for Preact<br>A lightweight collection of typed, tree-shakeable hooks built specifically for Preact.<br>kamod-hooksPreact-first · Typed · Tree-shakeable<br>Retro docs, modern hooks<br>Ship Preact features faster with production-ready hooks.<br>Start with setup, verify behavior in live demos, and copy implementation-ready hook patterns<br>with published TypeScript signatures.
Start with setupBrowse all hooksOpen GitHub
78 documented hooks<br>81 live demos<br>0 runtime deps in core
Install<br>pnpmnpmyarn<br>pnpm add @kamod-ch/hooks preact
live-demo.tsx<br>Live demoSource includedBehavior first<br>Preview the docs experience<br>Test a real hook, inspect the exact source, and confirm the API shape before you implement it.
Live Real interactive state<br>Exact Copy the shown source<br>Typed Match the published package
useToggle<br>Toggle between two real values with explicit state changes.
Layout: list<br>ToggleSet listSet grid
Hide sourceimport { useToggle } from '@kamod-ch/hooks'
export default function UseToggleDemo() {<br>const [value, actions] = useToggle('list', 'grid')
return (
Layout: {value}
Toggle<br>Set list<br>Set grid
Why kamod-hooksFocused on practical Preact usage<br>The library mirrors the real implementation in packages/core and keeps the docs grounded in shippable examples.
PXPreact-first<br>Hooks are authored for Preact instead of wrapping a React-focused API surface.
TSTyped by default<br>Distributed declarations stay aligned with implementation and generated docs output.
APITree-shakeable exports<br>Import from the main package or use per-hook subpaths without extra runtime cost.
WEBBrowser-native hooks<br>Storage, observers, fullscreen, WebSocket, and URL state are covered with concrete examples.
How it worksGo from overview to code quickly<br>Use the docs like a template: start with the guide, verify behavior in a demo, then copy the exact source shape you need.
01Read the guide<br>Install the package, choose an import style, and review SSR notes before implementation.
02Test a live example<br>Use an interactive demo to validate behavior, defaults, and edge cases before shipping.
03Copy the exact API<br>Use the page signature and demo source as the baseline for production usage.
ExploreMove from overview to implementation details<br>Start with the guide, scan the full hooks index, or jump directly to the exported utilities.
Guides<br>Install, import, SSR notes, TypeScript usage, and migration details.<br>Hooks reference<br>Every public hook export has its own page, live demo, and source snippet.<br>Utilities<br>Reference pages for clearCache, configResponsive, and createUpdateEffect.
Start with the docs, then ship faster.<br>Use the getting-started guide for setup, then jump into the hook pages for demos, signatures, and implementation-ready examples.<br>Open getting startedBrowse all hooks