Usage

Overview

The Thrive Design System provides custom React hooks that encapsulate common UI logic. These hooks handle dialog management, responsive detection, pagination state, and other recurring patterns so you don't have to rewrite them.

useDialog

Manages dialog open/close state and provides imperative controls for programmatic dialog management.

import { useDialog } from '@thrivecart/ui';

function MyComponent() {
  const { isOpen, open, close, toggle, dialogProps } = useDialog();

  return (
    <>
      <Button onClick={open}>Open Dialog</Button>
      <Dialog {...dialogProps}>
        <DialogContent>
          <p>Dialog content here</p>
          <Button onClick={close}>Close</Button>
        </DialogContent>
      </Dialog>
    </>
  );
}

Returns:

useMobile

Detects whether the viewport is at mobile breakpoint using a media query listener.

import { useMobile } from '@thrivecart/ui';

function MyComponent() {
  const isMobile = useMobile();

  return (
    <div>
      {isMobile ? (
        <Drawer>Mobile layout</Drawer>
      ) : (
        <Dialog>Desktop layout</Dialog>
      )}
    </div>
  );
}

Returns: boolean - true when viewport width is below the mobile breakpoint.

Use cases:

• Switching between mobile and desktop component variants
• Conditionally rendering navigation patterns
• Adjusting layout density based on screen size

usePagination

Manages pagination state for lists and data tables, providing page navigation logic.

import { usePagination } from '@thrivecart/ui';

function MyComponent({ totalItems }) {
  const pagination = usePagination({
    totalItems,
    pageSize: 10,
    initialPage: 1,
  });

  return (
    <div>
      <DataList items={pagination.currentItems} />
      <Pagination
        currentPage={pagination.currentPage}
        totalPages={pagination.totalPages}
        onPageChange={pagination.goToPage}
      />
    </div>
  );
}

Best Practices

• Use useDialog instead of manually managing dialog open/close state with useState.
• Use useMobile for responsive behavior instead of CSS-only approaches when the component tree needs to differ between mobile and desktop.
• Combine usePagination with the DataTable component for consistent pagination across the application.
• All hooks follow React's rules of hooks; call them at the top level of your component.

Installation

All hooks are included in the main package:

pnpm add @thrivecart/ui

import { useDialog, useMobile } from '@thrivecart/ui';