Recipes

Next.js admin panel

Wrap the layout that contains sensitive data and add a demo toggle in the header.

// app/layout.tsx
import { RedactProvider } from 'react-redact';
import 'react-redact/styles.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <RedactProvider shortcut="mod+shift+x">
          {children}
        </RedactProvider>
      </body>
    </html>
  );
}

// components/admin-header.tsx
import { useRedactMode } from 'react-redact';

export function AdminHeader() {
  const { isRedacted, toggle } = useRedactMode();
  return (
    <header>
      <button onClick={toggle} aria-pressed={isRedacted}>
        {isRedacted ? 'Show real data' : 'Demo mode'}
      </button>
    </header>
  );
}

Use URL param (?redact=true) or env to start in redacted state (e.g. permanent demo env). getInitialRedactEnabled() reads the URL; for env (e.g. NEXT_PUBLIC_REDACT=true) pass from your app so it works with SSR.

import { RedactProvider, getInitialRedactEnabled } from 'react-redact';

// URL only (client)
<RedactProvider enabled={getInitialRedactEnabled()} mode="replace">
  <Dashboard />
</RedactProvider>

// Next.js: URL or env (SSR-safe)
const redactFromEnv = process.env.NEXT_PUBLIC_REDACT === 'true';
<RedactProvider enabled={typeof window !== 'undefined' ? getInitialRedactEnabled() : redactFromEnv} mode="replace">
  <Dashboard />
</RedactProvider>

Auto-detect in a single section

Use <RedactAuto> only where you need scanning; keep the rest of the page unchanged.

<RedactProvider>
  <Sidebar />
  <main>
    <RedactAuto patterns={['email', 'phone', 'credit-card']}>
      <CustomerDetails />
    </RedactAuto>
  </main>
</RedactProvider>

Storybook

Wrap your preview with RedactProvider and use the shortcut or a toolbar button wired to useRedactMode().toggle so you can capture redacted screenshots.

Recipes

Recipes

Next.js admin panel

SaaS dashboard demo mode

Auto-detect in a single section

Storybook

On this page