Blanket
A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Blanket } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| isTinted | boolean | true | Whether the blanket darkens what is behind it. Untinted still blocks interaction without dimming. |
| onBlanketClicked | () => void | — | Called on a click outside the layer above. Treat it the same as the close button and as Escape. |
Accessibility
What the component does for you, and what it needs from you.
- A blanket that can be clicked to dismiss must not be the only way out. Escape and a close button have to work too, because neither a keyboard nor a screen reader will find a click target with no name.
- What is underneath should be taken out of the reading order while the blanket is up, or a screen reader will wander behind it.
- The tint was measured rather than assumed, and deepens in the dark theme.