Foundations / PlopProvider
PlopProvider
Sets the surface, theme and feedback settings for everything inside it, and renders the filters, ink-burst layer and toast zone.
Client componentSince v0.1
Poster
Cutting mat
Notebook
Kraft
Riso
import "@plop-ui/react/styles.css";
import { PlopProvider } from "@plop-ui/react";
<PlopProvider surface="poster" theme="system" haptics sound={false} reducedMotion="system">
{children}
</PlopProvider>Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| children | ReactNode | none | — |
| haptics | boolean | false | Vibrate on press and toggle (phones only). Inherits from a parent PlopProvider, else `true`. |
| paint | boolean | true | Paint the surface's background and text color on this element. |
| reducedMotion | "system" | "always" | "never" | none | `system` follows prefers-reduced-motion. Inherits from a parent PlopProvider, else `system`. |
| sound | boolean | false | Soft "plop" sounds. Inherits from a parent PlopProvider, else off; turn on only after a person asks for it. |
| stickerShadow | "soft" | "solid" | "stripes" | "outline" | "none" | soft | The default shadow for every sticker inside: `soft`, `solid`, `stripes`, `outline` or `none`. A sticker's own `shadow` wins. |
| surface | "poster" | "mat" | "notebook" | "kraft" | "riso" | none | The paper everything sits on. Leave it out to keep the surrounding surface (a parent provider's, or the page's `data-plop-surface`; poster when there is none). |
| theme | "system" | "light" | "dark" | system | `system` follows prefers-color-scheme. |
| toastBackdrop | "solid" | "none" | "dots" | solid | What shows behind a toast: `solid` (a faint gradient wash), `dots` (a comic halftone screen) or `none`. |
| toaster | boolean | true | Render the toast zone that `toast()` shows messages in. |
Also takes every attribute of <div> (277 more, e.g. onClick, className, aria-*).
Use it well
DoPut one provider near the root and give people a haptics and sound switch (this site's header has one). Nested providers inherit those settings, so one switch covers the page.
Don'tTurn sound on by default. Let people choose it.
Accessibility
- theme="system" follows prefers-color-scheme.
- reducedMotion="system" follows prefers-reduced-motion.
- Haptics always pair with a visual change.