Sage Hooks (@thesage/hooks)

Essential React Hooks for the Solopreneur.

Documentation • GitHub

Sage Hooks is a curated collection of lightweight, type-safe React hooks designed to solve common UI interaction problems. It follows the "batteries included" philosophy of the Sage ecosystem.

✨ Features

• 🪶 Lightweight: Zero external dependencies (besides React).
• 🔒 Type Safe: Built with TypeScript for excellent DX.
• 🧩 Composable: Designed to work seamlessly with Sage UI components.

🚀 Installation

pnpm add @thesage/hooks

💻 Usage

import { useClipboard, useMediaQuery } from '@thesage/hooks';

function CopyButton() {
  const { copy, copied } = useClipboard();
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <button onClick={() => copy('Hello World')}>
      {copied ? 'Copied!' : isMobile ? 'Copy' : 'Copy to Clipboard'}
    </button>
  );
}

📦 Available Hooks

| Hook | Description | | :--- | :--- | | useClipboard | Copy text to clipboard with timeout state. | | useMediaQuery | Subscribe to media query changes (responsive logic). | | useLocalStorage | Persist state to localStorage with JSON parsing. | | useHover | Track hover state of an element. | | useDebouncedValue | Debounce a value change (useful for search inputs). |

📄 License

MIT © Shalom Ormsby