Redact

The “Redact” component is a simple and intuitive way to redact info in scenarios where you need to hide confidential information, such as passwords, personal details, or any other sensitive text. It uses coverup .

Quick Start

To start using the Redact component, import it from the reablocks library and provide the value prop.

import { Redact } from 'reablocks';


export default function App() {
return <Redact value="Don't tell!" />
}

import { Redact } from 'reablocks';

export default function App() {
return <Redact value="Don't tell!" />
}

D********!

Examples

Basic Usage

To redact text, simply pass the sensitive string you wish to hide to the value prop of the Redact component. The component obscures the text, showing only a predefined number of characters as a placeholder:

API

The Redact component is highly customizable through the following properties:

Name	Type	Default
`className`	`string` Classname of the element.
`allowToggle`	`boolean` Whether you can toggle the text or not.	`true`
`compactLength`	`number` Number of mask characters shown between the first and last characters, regardless of the value’s length (e.g. `compactLength: 8` renders `m********d`). When 0, the middle is masked at its true length.	`8`
`character`	`string` The character to replace the text with.	`'*'`
`tooltipText`	`string` Text to show upon hover.	`'Click to toggle sensitive content'`
`value`	`string` Value to conceal.
`theme`	`RedactTheme` The theme for the Redact.

Design and Usability Tips

Toggle Simplicity: Make toggling the visibility of redacted information simple and intuitive, using icons or textual cues that clearly indicate the action.
Sensitive Information Awareness: Educate users about the sensitivity of the information being redacted, potentially through tooltips or help icons, to foster understanding and cautious interaction.