@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

Apache-2.0