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:

Prop	Description	Default
`className`	Classname of the element. `string`
`allowToggle`	Whether you can toggle the text or not. `boolean`	`true`
`compactLength`	Number of characters to compact to. `number`	`8`
`character`	The character to replace the text with. `string`	`*`
`tooltipText`	Text to show upon hover. `string`	`Click to toggle sensitive content`
`value`	Value to conceal. `string`
`theme`	The theme for the Redact. `RedactTheme`

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.