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.
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.
Last updated on