Redact Text for React

Redact Text covers chosen words with bars, like a declassified file, then takes the bars off one after another, each one wiping away in the reading direction to show the word underneath. By default they come off a moment after the text scrolls into view; they can also come off while the pointer is over the text, or when you say so, from a button.

Use it for a teaser, a launch announcement, a privacy page, or a before and after where the hidden words are the point. For a panel that wipes across a whole line, use Mask Reveal Text; for text that decodes itself, Decrypted Text. The words keep their place under the bars, so nothing moves when they come off: each bar is a clip-path CSS transition, delayed by its place among the bars, with no animation library. With reduced motion the bars simply go.

Installation

Usage

import { RedactText } from "@/components/ui/redact-text";

<RedactText
  text="The secret project employs classified operatives."
  words={["secret", "classified"]}
/>

Demos

Hover

trigger="hover" takes the bars off while the pointer is over the text, and puts them back when it leaves. words takes phrases as well as words: each is one bar.

Button

revealed takes the bars off and puts them back when you say, here from a button with aria-pressed; while it's set, the trigger is ignored. barColor is the bars' colour, any CSS colour or theme variable, and stagger the time between one bar and the next.

Accessibility

Screen readers never hear a hidden word before it's revealed. They read the sentence from a visually hidden copy that says label, "redacted" by default, in place of each hidden word, and the words themselves once the bars are off; the visible text is hidden from them. When you drive revealed yourself, that copy is a polite live region, so pressing your button reads the revealed sentence out; when the text reveals itself, in view or on the page, it changes quietly. While covered, the words can't be selected either.

Hover is a peek for the pointer alone: a keyboard or a touch screen can't hover, and screen readers keep hearing "redacted". For words everyone should be able to reveal, use a button, as in the demo.

FAQ

API Reference