react-redact

Getting Started

Install react-redact and add demo-safe redaction to your React app in under 2 minutes.

Getting Started

react-redact lets you visually hide PII in your UI with a single keyboard shortcut. It's designed for demos, screenshares, and presentations — not as a security product. Data stays in the DOM; only the display changes.

Install

pnpm add react-redact
# or: npm install react-redact
# or: yarn add react-redact

Setup (3 steps)

1. Wrap your app with the provider

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

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

2. Mark sensitive content

import { Redact } from 'react-redact';

function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: <Redact>{user.email}</Redact></p>
      <p>Phone: <Redact>{user.phone}</Redact></p>
    </div>
  );
}

3. Toggle with a shortcut

Press ⌘⇧X (Mac) or Ctrl+Shift+X (Windows/Linux) to toggle redaction on and off. That's it!

You can also toggle programmatically:

import { useRedactMode } from 'react-redact';

function DemoModeButton() {
  const { isRedacted, toggle } = useRedactMode();
  return (
    <button onClick={toggle}>
      {isRedacted ? 'Show real data' : 'Enable demo mode'}
    </button>
  );
}

Live demo

or press ⌘⇧X / Ctrl+Shift+X
Emailsarah.j@acme.corp
Phone(415) 555-0198
Card4532 8901 2345 6789
SSN423-91-8847

URL-based activation

For permanent demo environments, load the page with ?redact=true:

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

<RedactProvider enabled={getInitialRedactEnabled()}>
  {children}
</RedactProvider>

Next steps

  • Redact component — manual redaction with blur, mask, or replace
  • RedactAuto — auto-detect and wrap PII in a subtree
  • Provider — global config and keyboard shortcut
  • Modes — blur, mask, replace, custom
  • Patterns — built-in PII patterns and custom regex
  • Recipes — common integration patterns