Live docs · npm · GitHub · Issues

If Kamod Hooks saves you time, star the repo — it helps others discover the project.

Production-ready hooks for Preact — fast to adopt, easy to tree-shake, and built with zero runtime dependencies beyond preact itself.

kamod-hooks is a Preact-first hook library inspired by ahooks. It brings together state, lifecycle, browser, async, and utility hooks in a single TypeScript-friendly package, backed by a live docs site with interactive demos and visible source code.

pnpm add @kamod-ch/hooks preact

import { useToggle, useCounter, useLocalStorageState } from '@kamod-ch/hooks'

Explore now: Live docs · Hooks index · Getting started

• Docs & live demos: https://kamod-ch.github.io/kamod-hooks/
• Hooks overview: https://kamod-ch.github.io/kamod-hooks/hooks
• Getting started: https://kamod-ch.github.io/kamod-hooks/guide/introduction
• Package: @kamod-ch/hooks
• Local demo: pnpm demo

• Why kamod-hooks?
• Feature matrix
• Install
• Basic usage
• Most used hooks
• Demo
• Example
• Documentation site
• Notable behavior
• Hooks and utilities
• Scripts
• License

Use hooks for the things you actually need in production:

• state and lifecycle helpers
• debounce / throttle / timing
• storage and URL state sync
• DOM and browser APIs
• drag & drop, viewport, fullscreen, selection, media
• async requests, caching, and pagination

• Peer dependency only: preact
• No runtime npm dependencies in @kamod-ch/hooks
• ESM output for modern bundlers
• TypeScript-first with generated declarations
• Tree-shakeable root exports and subpath imports

The project ships with a documentation site that doubles as a live demo environment:

• interactive examples
• source code shown directly with each example
• searchable hook docs
• guide pages for setup and usage

pnpm add @kamod-ch/hooks preact

import { useToggle, useUrlState } from '@kamod-ch/hooks'

Subpath imports are also supported:

import useToggle from '@kamod-ch/hooks/useToggle'
import useUrlState from '@kamod-ch/hooks/useUrlState'

The root export remains tree-shakeable in modern bundlers. Subpath imports can be useful when you prefer more explicit dependency boundaries or want to inspect bundle composition more directly.

If you're new to the library, these are strong starting points:

• useToggle — small, practical boolean/value toggling helper
• useCounter — counter state with ergonomic actions
• useDebounce / useThrottle — common UI responsiveness helpers
• useLocalStorageState — persist UI state across reloads
• useUrlState — sync filters and view state into the URL
• useRequest — async lifecycle, refresh, cache, and loading state
• useClickAway — close popovers, dropdowns, and menus safely
• useSize / useInViewport — layout- and viewport-aware UI behavior
• useTheme — light/dark/system theme handling

The fastest way to understand the library is to try the live documentation:

• Live demo + docs: https://kamod-ch.github.io/kamod-hooks/
• Hooks index: https://kamod-ch.github.io/kamod-hooks/hooks
• Guide: https://kamod-ch.github.io/kamod-hooks/guide/introduction

Run the local demo/dev site:

pnpm install
pnpm demo

import { useCounter, useToggle } from '@kamod-ch/hooks'

export function Example() {
  const [count, { inc, dec, reset }] = useCounter(0)
  const [enabled, { toggle }] = useToggle(false)

  return (
    <div>
      <p>Count: {count}</p>
      <p>Enabled: {String(enabled)}</p>

      <button onClick={() => inc()}>+</button>
      <button onClick={() => dec()}>-</button>
      <button onClick={reset}>Reset</button>
      <button onClick={toggle}>Toggle</button>
    </div>
  )
}

The documentation in packages/docs is built with PreactPress and acts as both reference and demo site.

It includes:

• getting-started guides
• hook reference pages
• live interactive demos
• visible example source code
• search and outline navigation
• static deployment support for GitHub Pages

Run locally:

pnpm docs:dev

Check docs integrity:

pnpm docs:check

Production build and preview:

pnpm docs:build
pnpm docs:preview

• useUrlState syncs query params via the History API (pushState / replaceState) and listens to popstate.
• Browser-facing hooks use native platform APIs such as ResizeObserver, IntersectionObserver, Fullscreen API, matchMedia, and storage APIs.
• The project is inspired by ahooks, but hooks are adapted for a Preact-first and browser-native setup.

Recommended: useToggle, useCounter, useSetState, useLocalStorageState

Recommended: useMemoizedFn, useLatest, useUpdateEffect, useIsomorphicLayoutEffect

Recommended: useDebounce, useDebounceFn, useThrottle, useTimeout

Recommended: useClickAway, useSize, useInViewport, useFullscreen

Recommended: useUrlState, useLocalStorageState, useTheme, useResponsive

Recommended: useRequest, usePagination, useWebSocket, clearCache

Issues and improvements are welcome. If you change docs behavior or hook APIs, please validate both package and docs flows:

pnpm build
pnpm test
pnpm docs:check

Released under the MIT License. See LICENSE and NOTICE.

Built by Klaus Zahiragic | Kamod GmbH

Website · LinkedIn