react-redact

Redact

Manually wrap content to be redacted when demo mode is on.

Redact

Wrap any content to be visually redacted when redact mode is enabled.

Usage

import { Redact } from 'react-redact';

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

Props

PropTypeDefaultDescription
childrenReactNode—Content to redact
mode'blur' | 'mask' | 'replace' | 'custom'from contextHow to display when redacted
replacementstring—For mode="replace": custom replacement text
renderRedacted(props: { children, text }) => ReactNode—For mode="custom": your render function. Overrides provider customRender.

Modes

  • blur — filter: blur(6px); original text remains in DOM.
  • mask — Bullets matching character length (ch units).
  • replace — Swap with replacement prop or deterministic fake data (when children is a string).
  • custom — Use renderRedacted (or provider customRender). Your node should have data-redact and aria-hidden.

When redact mode is off, children render as-is with no wrapper.

Getting Started

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

RedactAuto

Automatically scan a subtree for PII and wrap matches.

On this page

RedactUsagePropsModes