Modes

Redaction can be shown in four ways (and a fifth custom option for full control).

Blur (default)

Uses filter: blur(6px) so the original text is still in the DOM but unreadable. GPU-accelerated and fast. Best for quick demos.

Set via <RedactProvider mode="blur"> or <Redact mode="blur">.

Mask

Replaces characters with bullets (•) and keeps the same visual width using ch units. Copy-paste safe (no real text in the redacted span). Good for forms and tables.

<Redact mode="mask">555-123-4567</Redact>

Replace

Swaps content with deterministic fake data (or a custom string via the replacement prop). Same input always produces the same fake output, so toggling doesn’t flicker.

<Redact mode="replace">user@company.com</Redact>
<Redact mode="replace" replacement="Jane Smith">John Doe</Redact>

Fake data is generated from a hash of the original value for emails, phones, SSNs, IPs, and credit-card values.

Name detection is intentionally not built in for RedactAuto because generic name regex rules produce too many false positives. For names, use manual <Redact> wrapping (or provide targeted customPatterns for your own domain data).

Secure

Like replace — deterministic fake data when a pattern is recognized, otherwise the configurable mask character — but with a stronger DOM guarantee: the real value is never written to the DOM while redaction is enabled. No text node, no data-redact-original attribute, nothing a "View Source", devtools Elements-panel inspection, or DOM-scraping copy/OCR pass can recover.

<RedactProvider mode="secure">
  <RedactAuto patterns={['email', 'phone']}>
    <CustomerDetails />
  </RedactAuto>
</RedactProvider>

<Redact mode="secure">user@company.com</Redact>

<RedactAuto> keeps the original text only in an in-memory WeakMap keyed by the span element (not the DOM) so it can restore it once you disable redaction — including through the MutationObserver-driven rescan path when content changes while redaction stays on. <Redact> simply never renders children while enabled; the real value only ever exists as that render's children prop.

Set via <RedactProvider mode="secure"> or <Redact mode="secure">. Reach for it whenever the audience might poke at devtools — public demos, recordings that get uploaded somewhere, or any screenshare where you can't fully vouch for who's watching. See the Security model in the README for exactly what secure mode does and doesn't cover — it closes the DOM-inspection hole, not every possible way to see PII.

Custom

Use your own render function when redacted. Pass renderRedacted on <Redact> or customRender on RedactProvider (used when a <Redact mode="custom"> doesn’t provide its own). Your component should render a wrapper with data-redact (and aria-hidden) so the global toggle still applies.

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

// Per-component
<Redact
  mode="custom"
  renderRedacted={({ text }) => (
    <span data-redact aria-hidden style={{ color: 'red' }}>[{text}]</span>
  )}
>
  secret@email.com
</Redact>

// Default for all mode="custom" via provider
<RedactProvider customRender={({ text }) => <span data-redact aria-hidden>REDACTED</span>}>
  <Redact mode="custom">any text</Redact>
</RedactProvider>