denwa-web-shared/skills/viewport-hooks/SKILL.md

A shared library for Next.js App Router projects containing reusable components, hooks, schemas, and utilities.

---
name: viewport-hooks
description: >
  Use the shared viewport hooks rather than react-use.
  Load when writing responsive behavior, using useMedia, useLaptopBigViewPort, useMobileViewPort.
type: core
library: denwa-web-shared
library_version: '1.0.58'
sources:
  - 'src/client/hooks/use-view-port.ts'
---

# denwa-web-shared — Use custom viewport hooks

## Setup

```tsx
import { useMobileViewPort } from 'denwa-web-shared/client';

const { isMobileMaxWidth, isMobileMinWidth } = useMobileViewPort();
```

## Core Patterns

### Conditional rendering based on viewport

```tsx
import { useMobileViewPort, useLaptopViewPort } from 'denwa-web-shared/client';

export const ResponsiveLayout = () => {
  const { isMobileMaxWidth } = useMobileViewPort();
  const { isLaptopMinWidth } = useLaptopViewPort();

  if (isMobileMaxWidth) return <MobileMenu />;
  if (isLaptopMinWidth) return <DesktopMenu />;

  return <DefaultMenu />;
};
```

## Common Mistakes

### HIGH Importing useMedia directly

Wrong:

```tsx
import { useMedia } from 'react-use';

const isMobile = useMedia('(max-width: 450px)');
```

Correct:

```tsx
import { useMobileViewPort } from 'denwa-web-shared/client';

const { isMobileMaxWidth } = useMobileViewPort();
```

Agents import useMedia from react-use and manually provide viewport breakpoints instead of using the custom hooks.

Source: maintainer interview