Data

Redact

Hides amounts and other values from view, for a screen share or a café, behind a mask of the same width so nothing moves. Screen readers hear hidden value. Amount, Metric and RollingNumber already follow it; wrap anything else in Redact. Whether it is on is your app's state, passed to RedactProvider. It hides from view, not from the page: the values stay in the HTML, so it is no place for a secret.

view .md

Preview

balance

hidden value

Up +7.4%vs August

account

number last paid

Installation

terminal

bash

npx @entrepta/cli@latest add redact

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

redact.tsx

tsx

import { RedactProvider } from "@/hooks/use-redact"
import { Redact } from "@/components/entrepta/redact"

const [hidden, setHidden] = useState(false)

<RedactProvider hidden={hidden}>
  <Button variant="ghost" aria-pressed={hidden} onClick={() => setHidden(!hidden)}>hide values</Button>
  <Metric label="balance" value={<Amount value={balance} />} />   // hides on its own
  <Redact>{accountNumber}</Redact>                               // anything else
</RedactProvider>

Props

Prop	Type	Default	Description
hidden	boolean	-	On RedactProvider: the app's switch
label	string	"hidden value"	On Redact: what screen readers hear in its place
useRedacted()	boolean	-	True when a value here should draw a mask, for components of your own