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-redactSetup (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