Skip to content
TanStackIntent
TanStack Intent/Registry/denwa-web-shared

denwa-web-shared

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

viewport-hooks

core
64 linesSource

Use the shared viewport hooks rather than react-use. Load when writing responsive behavior, using useMedia, useLaptopBigViewPort, useMobileViewPort.

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