Redact

Masks sensitive content with a configurable character, keeping first and last characters visible. Click to toggle visibility.

Import

import { Redact } from 'reablocks';

Redact Props

Basic Usage

<Redact value="my-secret-api-key-12345" />
{/* Renders: "m******5" — click to toggle */}

Non-Toggleable

<Redact value="sensitive-data" allowToggle={false} />
{/* Always masked, not clickable */}

Custom Masking

<Redact value="secret" character="•" compactLength={6} />
{/* "s••••t" */}

RedactTheme Interface

interface RedactTheme {
  base: string;         // Base styles (cursor-text)
  interactive: string;  // Styles when allowToggle is true (cursor-pointer, hover:underline)
}