@bttrlabs/hooks

Collection of reusable React hooks that power the bttr design system. Each hook encapsulates common interaction, accessibility, and browser behaviour so product teams can focus on delivering features.

Features

• State hooks (useToggle, useDisclosure, usePagination, etc.) that simplify complex orchestration.
• Browser utilities (useClickOutside, useWindowSize, useMediaQuery, useThrottle, useDebounce).
• Storage helpers (useLocalStorage, useSessionStorage) with SSR-safe guards.
• Opinionated defaults that integrate seamlessly with @bttrlabs/ui components.
• Fully typed APIs with exhaustive test coverage via Vitest.

Installation

pnpm add @bttrlabs/hooks

Quick start

import { useDisclosure } from '@bttrlabs/hooks';
import { Modal, Button } from '@bttrlabs/ui';

export function NewsletterModal() {
  const disclosure = useDisclosure();

  return (
    <>
      <Button onClick={disclosure.onOpen}>Join newsletter</Button>
      <Modal open={disclosure.isOpen} onClose={disclosure.onClose}>
        {/* modal content */}
      </Modal>
    </>
  );
}

Testing

The hooks package ships with Vitest tests. Run them in isolation with:

pnpm test --filter hooks

Contributing

• Keep hooks framework-agnostic (React 18+). Avoid DOM access during SSR and guard browser-only APIs.
• Add Storybook examples under apps/storybook/src/stories to demonstrate real-world usage.
• Document edge cases and return signatures in JSDoc blocks for richer IntelliSense.

License

MIT © bttrlabs