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 (opens in a new tab).

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.

Pluralize Sort