v0.1.0|zero dependencies|3.3 kB
One shortcut to make
your app
React components that visually hide PII.
Press ⌘⇧X and walk into any screenshare.
dashboard.tsx
Emailsarah.johnson@acme.corp
Phone(415) 555-0198
SSN423-91-8847
Card4532 8901 2345 6789
Interactive — click toggle or switch modes·
$ pnpm add react-redactCapabilities
Everything you need,
nothing you don't
01
Toggle Anything
Keyboard shortcut, hook, or URL param. One line to wire up, one keystroke to activate.
⌘⇧X
02
Three Modes
Blur hides instantly. Mask replaces with bullets. Replace generates deterministic fake data.
blur | mask | replace
03
Auto-Detect
RedactAuto scans DOM subtrees for email, phone, SSN, credit card, IP. Custom regex supported.
5 built-in patterns
04
Zero Dependencies
React is the only peer dep. ESM + CJS dual output, tree-shakeable, 3.3 kB gzipped.
3.3 kB
Comparison
Before & after
See what your audience sees when redaction is on.
OriginalRedacted
name
Sarah Johnson
email
sarah.j@acme.corp
phone
(415) 555-0198
card
4532 8901 2345 6789
ip
192.168.1.42
Quick start
Running in 10 lines
Wrap your app, mark the sensitive bits, toggle with a shortcut.
App.tsx
1import { RedactProvider, Redact, useRedactMode } from "react-redact";2import "react-redact/styles.css";34function App() {5 return (6 <RedactProvider shortcut="mod+shift+x">7 <Dashboard />8 </RedactProvider>9 );10}1112function Dashboard() {13 const { isRedacted, toggle } = useRedactMode();14 return (15 <>16 <button onClick={toggle}>17 {isRedacted ? "Redacted" : "Visible"}18 </button>19 <p>Email: <Redact>user@company.com</Redact></p>20 </>21 );22}