Mischief

23 / Documents

Redaction

Mark regions to black out before a document leaves the building, with a reveal that says plainly it is only a preview.

Live previewSource
Statement, page 1
  • Redaction 1: Account number
  • Redaction 2: Customer name

2 redactions

  • 1Account number
  • 2Customer name

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Prepare({ page }: { page: string }) {
  return (
    <Redaction
      src={page}
      alt="Statement, page 1"
      regions={regions}
      onCreate={(rect) => addRegion(rect)}
      onDelete={removeRegion}
    />
  )
}

API

src, altstringThe page image and its description.
regionsRedactionRegion[]Id, optional reason, and x, y, width, height as fractions of the page.
onCreate(rect: RedactionRect) => voidRuns with a new region. Omit it to disable drawing.
onDelete(id: string) => voidRemoves a region.
revealed, defaultRevealed, onRevealedChangebooleanWhether the covered regions are shown for review.
readOnlybooleanShows the result without editing controls.

Accessibility

Every region carries a number and its reason in text, and says when it is revealed, so the state is never conveyed by a black rectangle alone. Revealing raises a status message stating that the cover is visual only and the source file still has to be redacted, because a component that merely paints over a page must not be mistaken for one that removes data.

Dependencies

lucide-react