Recipes and integration choices

Vite

The repository includes a runnable examples/vite workspace. It uses DemoProvider, registered fields, and the real Studio with a bounded root. Run pnpm --filter react-redact-vite dev after building the library.

Storybook

Use a stable document and entity per story. A decorator can wrap the story with DemoProvider; a component needing a record can call createDemoRecord before rendering. Keep the seed/reference date fixed so screenshot changes represent UI changes rather than a moving data fixture.

import { createDemoDocument, createDemoRecord } from 'react-redact/data';
const policy = createDemoDocument();
export const CustomerExample = {
  args: { customer: createDemoRecord(policy, 'demo-1') },
};

Mock Service Worker

Use the generated record in your existing MSW handler. No new mocking runtime is bundled with react-redact.

import { http, HttpResponse } from 'msw';
import { createDemoDocument, createDemoRecord } from 'react-redact/data';
const policy = createDemoDocument();
export const handlers = [http.get('/api/customer', () =>
  HttpResponse.json(createDemoRecord(policy, 'demo-1')),
)];

This is an integration recipe, not a separately bundled Storybook/MSW application. The executable Next.js and Vite examples live in the repository.

Screenshots and recordings

Use preflight checks, visit each demonstrated state, then capture with your own Playwright or recording workflow. Prepare demo state before starting a screen share. The in-page capture watcher cannot detect other applications sharing your screen.

Component or extension?

Choose react-redact when you own the React app and want repeatable semantic fields and coherent samples. A browser extension may suit one-off concealment on a site you cannot modify. A hosted demo-capture product can suit teams needing sharing/analytics workflows. This package provides neither an arbitrary-site extension nor a hosted demo service.