Official hooks package for Fict.
@fictjs/hooks provides official, production-ready hooks built for Fict signal/lifecycle semantics.
- 39 official hooks across lifecycle, event, timing, state, browser, storage, observer, async and clipboard
- SSR-safe browser hooks with injectable globals (
window,document,navigator) for non-browser/test environments - Root-only public entry (
@fictjs/hooks) with ESM tree shaking support - Published Fict package metadata (
dist/index.fict.meta.json) for cross-package hook return reactivity - Strong type and coverage gates (
lint,typecheck,test:types,test:coverage,build,verify:metadata,test:attw)
For application usage:
npm add @fictjs/hooks @fictjs/runtime
# or
yarn add @fictjs/hooks @fictjs/runtime
# or
pnpm add @fictjs/hooks @fictjs/runtime- Runtime consumers: Node.js >= 18
- Repository development/build/test: Node.js
^22.18.0 || >=24.11.0(the supported range of the build toolchain) - Release publishing: Node.js 24.11 or newer
- Peer dependency:
@fictjs/runtime@^0.26.0
import { useCounter, useMount } from '@fictjs/hooks';
export function CounterExample() {
const { count, inc, dec, reset } = useCounter(0);
useMount(() => {
inc();
});
return { count, inc, dec, reset };
}In plain TypeScript/JavaScript usage (without Fict compile transforms), read reactive values via accessors, for example count().
- Only import from
@fictjs/hooks; deep imports are unsupported - Tree shaking is supported through ESM exports and
"sideEffects": false
pnpm build emits:
dist/index.fict.meta.json- ESM/CJS runtime files
.d.tsand.d.ctstype declarations
package.json#fict.metadata points at the generated metadata file so Fict 0.26.0 consumers can recover hook return reactivity from the published npm package.
Run pnpm verify:metadata after pnpm build to verify the generated metadata and the npm tarball contents.
- Hooks follow Fict top-level hook rules (
useXin component/hook top-level scope) - Effects/listeners/timers are auto-cleaned on root dispose
- Browser hooks are SSR-safe and provide unsupported fallbacks
- Browser globals can be injected with options like
window,document, ornavigatorwhen needed
All hook docs are versioned with each release under docs/hooks.
- Lifecycle:
useMount,useUnmount - Event:
useEventListener,useClickOutside,useHover,useFocusWithin,useKeyPress - Timing:
useDebounceFn,useThrottleFn,useTimeoutFn,useIntervalFn,useRafFn - State:
useToggle,useCounter,usePrevious,useVirtualList - Browser:
useScroll,useWindowScroll,useWindowSize,useTitle,useFullscreen,usePermission,useGeolocation,useIdle,useSize,useWebSocket,useMediaQuery,useDocumentVisibility,useNetwork - Storage:
useStorage,useLocalStorage,useSessionStorage - Observer:
useIntersectionObserver,useResizeObserver,useMutationObserver - Async:
useAsyncState,useFetch,useRequest - Clipboard:
useClipboard
Run interactive hook demos:
pnpm demo:devBuild static demo site:
pnpm demo:buildBefore publish, these checks must pass:
pnpm audit:devpnpm lintpnpm format:checkpnpm typecheckpnpm test:typespnpm test:types:ts53pnpm test:coveragepnpm buildpnpm verify:sizepnpm lint:distpnpm verify:metadatapnpm test:attw
prepublishOnly already enforces this pipeline.