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>
<Redact mode="secure">user@company.com</Redact>
<Redact blurRadius={10}>user@company.com</Redact>
<Redact mode="mask" maskChar="#">123-45-6789</Redact>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to redact |
mode | 'blur' | 'mask' | 'replace' | 'secure' | 'custom' | from context | How to display when redacted |
replacement | string | — | For mode="replace"/mode="secure": custom replacement text |
renderRedacted | (props: { children, text }) => ReactNode | — | For mode="custom": your render function. Overrides provider customRender. |
blurRadius | number | from context (6) | Overrides the provider's default blur radius (px) for this instance |
maskChar | string | from context ('•') | Overrides the provider's default mask character for this instance |
Modes
- blur —
filter: blur(<blurRadius>px)(default6); original text remains in DOM. - mask — Repeated
maskChar(default•) matching character length (chunits). - replace — Swap with
replacementprop or deterministic fake data (whenchildrenis a string). - secure — Compatibility name for replacement behavior:
childrenis never rendered while enabled, so the real value never becomes a DOM text node. See privacy boundaries. - custom — Use
renderRedacted(or providercustomRender). Your node should havedata-redactandaria-hidden.
When redact mode is off, children render as-is with no wrapper.
Mask/replace/secure need plain text to compute a bullet count or fake value. Passing a React element (rather than a string) as
childrenfalls back to a fixed-length placeholder and logs a dev-only console warning — usemode="blur"ormode="custom"for non-text children.