# useMobile / useIsMobile

## Overview

Two hooks that detect whether the current viewport is a mobile-width screen. Useful for conditionally rendering mobile-specific layouts, swapping components (e.g., `Drawer` vs `Sheet`), or hiding/showing content based on screen size.

---

## When to Use

- Conditionally render mobile vs desktop UI variants in the same component
- Swap between `<Drawer>` (mobile) and `<Sheet>` (desktop) panels
- Show simplified tables or cards on small screens

## When NOT to Use

- For simple layout differences — prefer Tailwind responsive classes (`hidden md:flex`) instead.
- As a replacement for CSS media queries — use these hooks only when the component tree needs to branch in React logic.

---

## Hooks

### `useMobile()`

```typescript
function useMobile(): boolean;
```

Returns `true` when the viewport width is below the mobile breakpoint (`768px` / `md`). Returns `false` on desktop.

### `useIsMobile()`

An alias for `useMobile()` — functionally identical. Use either one based on naming preference.

---

## Examples

### Conditional Sheet vs Drawer

```tsx
import { useMobile, Sheet, SheetContent, Drawer, DrawerContent } from 'xertica-ui/ui';

function FilterPanel({ open, onClose }) {
  const isMobile = useMobile();

  if (isMobile) {
    return (
      <Drawer open={open} onOpenChange={onClose}>
        <DrawerContent>{/* Filter controls */}</DrawerContent>
      </Drawer>
    );
  }

  return (
    <Sheet open={open} onOpenChange={onClose}>
      <SheetContent side="right">{/* Filter controls */}</SheetContent>
    </Sheet>
  );
}
```

### Conditional Column Display

```tsx
const isMobile = useMobile();

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      {!isMobile && <TableHead>Role</TableHead>}
      {!isMobile && <TableHead>Created At</TableHead>}
      <TableHead>Actions</TableHead>
    </TableRow>
  </TableHeader>
</Table>;
```

---

## AI Rules

- Prefer Tailwind responsive classes (`className="hidden md:table-cell"`) over this hook for simple CSS-based visibility — reserve these hooks for cases where the React component tree needs to be different.
- The breakpoint is `768px` (`md` in Tailwind). Anything below renders as mobile.
- Both `useMobile` and `useIsMobile` are identical — do not use both in the same component.
- These hooks are reactive — they update automatically when the window is resized.

---

## Related Components

- [`Sheet`](./sheet.md) — Desktop side panel
- [`Drawer`](./drawer.md) — Mobile bottom panel