Hookify is a lightweight, dependency-free collection of React hooks for everyday problems: debouncing, data fetching, toggling state, syncing state to storage, detecting outside clicks, and more. Every hook is written in TypeScript, fully typed, tree-shakeable, and documented with a live, editable demo.

Table of contents

• Features
• Installation
• Quick start
• Available hooks
• Documentation
• Local development
• Contributing
• Community
• License

Features

• 🪝 A growing collection of focused hooks covering the most common React state, effect, and side-effect patterns.
• 📦 Tiny and tree-shakeable — import only what you use; no runtime dependencies beyond React. Ships ESM and CommonJS builds.
• 🔒 Fully typed — written in TypeScript with generated .d.ts files included.
• ⚡ Zero config — works out of the box with any React 18 or 19 project (CRA, Vite, Next.js, Remix, etc.).
• 📚 Live docs — every hook has a runnable, editable demo and full API reference generated straight from the source.

Installation

Hookify has react and react-dom as peer dependencies (v18+).

npm install @altalyst/hookify

yarn add @altalyst/hookify

pnpm add @altalyst/hookify

Quick start

Import any hook directly from the package root:

import { useToggleState } from "@altalyst/hookify";

export const Example = () => {
  const [isVisible, toggleVisibility] = useToggleState(false);

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? "Hide" : "Show"} content
      </button>
      {isVisible && <p>This is some toggleable content!</p>}
    </div>
  );
};

Available hooks

| Hook | Description | | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | useApi | Declarative hook for making HTTP requests with built-in loading, error, and data state. | | useAutofillSubmit | Submit a form as soon as a password manager fills it, with typed, extensible options. | | useControlledState | Manage a value that works in both controlled and uncontrolled modes, like native inputs. | | useDebounce | Debounce a callback so it only runs after a delay has passed since its last invocation. | | useDocVisible | Track whether the current document/tab is visible via the Page Visibility API. | | useEffectAfterMount | Run an effect only after the initial mount, skipping the first render. | | useMounted | Track whether a component is currently mounted to guard async state updates. | | useOutsideClick | Fire a callback when a click or touch happens outside a given element. | | usePersistedState | Persist state to localStorage and sync it across browser tabs. | | useSequentialRequest | Ensure only the latest of several in-flight async requests resolves; stale ones are ignored. | | useToggleState | Toggle a boolean state with a simple, memoized setter. |

Browse the hooks documentation for live, editable demos and the full API of each hook.

Documentation

Full guides, live demos, and the generated API reference live at altalyst-solutions.github.io/hookify.

Local development

# Install library dependencies
npm run setup

# Run the test suite
npm test

# Lint and format
npm run lint
npm run format

# Build the library
npm run build

To preview documentation changes locally (including new hooks) without waiting for a deploy:

npm run docs:install   # first time only
npm run docs:dev       # starts Docusaurus with hot reload at localhost:3000

Live demos run the published npm release, so new or changed hooks only show up in them after a release. To see unreleased changes in the demos, use npm run docs:dev:local (and npm run watch in a second terminal to rebuild the library as you edit). See CONTRIBUTING.md.

Contributing

Contributions, issues, and feature requests are welcome! See CONTRIBUTING.md for local setup, how to add a new hook, and our commit/versioning conventions. Please also read our Code of Conduct. See CHANGELOG.md for release history.

Community

• 💬 GitHub Discussions — ask questions, share ideas.
• 🐛 Issues — report bugs or request features.
• 🔒 Security policy — how to report a vulnerability.
• 📦 npm — package page and version history.

License

MIT © Altalyst Solutions. See LICENSE for details.