# 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.

Section: Data. Docs: https://entrepta.vercel.app/docs/components/redact

## Install

```bash
npx @entrepta/cli@latest add redact
```

Files: `data/redact.tsx`, `hooks/use-redact.ts`.
No npm packages.
Comes with: `use-redact`.

## Usage

```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 |