Renders children with a controllable random seed exposed via React context.
Use <Arbitrary> when you want to feed randomly generated props into a component.
This is particularly useful for exploring edge cases or stress-testing a component's appearance without hand-authoring every combination.
The block exposes a numeric seed via React context, so children can produce a stable, reproducible set of inputs for any given seed value.
Libraries like fast-check provide composable random value generators. They provide generators for all basic types such as strings, numbers, arrays, and objects. You can combine those builtin generators to produce random values for your own types.
The seed is displayed in an input field where users can copy it or set a specific value. Children can consume it to render themselves in a predictable, reproducible way.
Given a component-under-test:
We can take it and display it inside an <Arbitrary> in a timvir doc page:
Let's assume you have a component that takes this Props shape.
First define a generator that produces values of that type. Then use the seed from the Arbitrary context to generate props for your component.