React Hooks Reference

Custom React hooks for interacting with the ReUp platform.

Authentication Hooks

useAuth

Manage user authentication state.

import { useAuth } from '@/hooks/useAuth';

function LoginPage() {
  const { user, isAuthenticated, login, logout, isLoading } = useAuth();

  const handleLogin = async () => {
    await login({ email, password });
  };

  return (
    <div>
      {isAuthenticated ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

Returns:

Property	Type	Description
user	User | null	Current user object
isAuthenticated	boolean	Authentication status
isLoading	boolean	Loading state
login	(credentials) => Promise<void>	Login function
logout	() => Promise<void>	Logout function
refreshToken	() => Promise<void>	Refresh access token

Data Fetching Hooks

useInventory

Fetch and manage inventory data.

import { useInventory } from '@/hooks/useInventory';

function InventoryList() {
  const {
    data,
    isLoading,
    error,
    refetch,
    updateQuantity
  } = useInventory({
    locationId: 'loc-uuid',
    roomType: 'sales_floor'
  });

  if (isLoading) return <Spinner />;

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.product_name}: {item.quantity}</li>
      ))}
    </ul>
  );
}

useOrders

Fetch and manage orders.

import { useOrders } from '@/hooks/useOrders';

function OrdersPage() {
  const {
    orders,
    isLoading,
    createOrder,
    updateOrderStatus
  } = useOrders({
    status: 'pending'
  });

  return (/* ... */);
}

useProducts

Fetch product catalog.

import { useProducts } from '@/hooks/useProducts';

function ProductCatalog() {
  const {
    products,
    isLoading,
    search,
    filter
  } = useProducts({
    category: 'flower'
  });

  return (/* ... */);
}

Real-time Hooks

useSyncStatus

Monitor Dutchie sync status.

import { useSyncStatus } from '@/hooks/useSyncStatus';

function SyncMonitor() {
  const {
    status,
    lastSync,
    isRunning,
    triggerSync
  } = useSyncStatus();

  return (
    <div>
      <p>Last sync: {lastSync}</p>
      <button onClick={triggerSync} disabled={isRunning}>
        {isRunning ? 'Syncing...' : 'Sync Now'}
      </button>
    </div>
  );
}

UI Hooks

useToast

Display toast notifications.

import { useToast } from '@/hooks/useToast';

function ActionButton() {
  const { toast } = useToast();

  const handleSave = async () => {
    try {
      await saveData();
      toast({ title: 'Saved!', variant: 'success' });
    } catch {
      toast({ title: 'Error saving', variant: 'destructive' });
    }
  };

  return <button onClick={handleSave}>Save</button>;
}

useModal

Manage modal state.

import { useModal } from '@/hooks/useModal';

function ConfirmDialog() {
  const { isOpen, open, close, data } = useModal();

  return (
    <>
      <button onClick={() => open({ itemId: '123' })}>Delete</button>
      <Modal isOpen={isOpen} onClose={close}>
        <p>Delete item {data?.itemId}?</p>
      </Modal>
    </>
  );
}

Form Hooks

useFormValidation

Form validation with Zod schemas.

import { useFormValidation } from '@/hooks/useFormValidation';
import { productSchema } from '@/schemas/product';

function ProductForm() {
  const {
    register,
    handleSubmit,
    errors
  } = useFormValidation(productSchema);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      {errors.name && <span>{errors.name.message}</span>}
    </form>
  );
}