@surf-kit/hooks

Shared React hooks for surf-kit — clipboard, keyboard shortcuts, media queries, and more

Part of the surf-kit design system.

Install

npm install @surf-kit/hooks

Quick Example

import { useClipboard } from '@surf-kit/hooks';

function CopyButton({ text }: { text: string }) {
  const { copy, copied } = useClipboard();
  return (
    <button onClick={() => copy(text)}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}

What's Included

| Hook | Description | |------|-------------| | useClipboard | Copy text to clipboard with copied state | | useMediaQuery | Subscribe to CSS media query matches | | useReducedMotion | Detect prefers-reduced-motion preference | | useLocalStorage | Persistent state backed by localStorage | | useKeyboardShortcut | Register global keyboard shortcuts | | useFocusTrap | Trap focus within a container element | | useAnnounce | Announce messages to screen readers via live regions |

Docs

• Storybook
• Contributing

License

0BSD