Modes

Redaction can be shown in three ways (and a fourth custom option for future use).

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).

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>