Fixture Modules

A fixture is a React Component or any React Node. A fixture module contains one or more fixtures.

Node Fixtures

export default <Button disabled>Click me</Button>;

Component Fixtures

Component fixtures are just React function components with no props. They enable using Hooks inside fixtures, which is powerful for simulating state with stateless components.

export default () => {
  const [count, setCount] = React.useState(0);
 
  return <CounterButton count={count} increment={() => setCount(count + 1)} />;
};

Multi-Fixtures

A fixture module can also export multiple fixtures if the default export is an object.

export default {
  'Primary': <PrimaryButton>Click me</PrimaryButton>,
 
  'Primary Disabled': <PrimaryButton disabled>Click me</PrimaryButton>,
 
  'Secondary': <SecondaryButton>Click me</SecondaryButton>,
 
  'Secondary Disabled': <SecondaryButton disabled>Click me</SecondaryButton>,
};

The object property names will show up as fixture names in the Cosmos UI.

See this comment (opens in a new tab) for the reasoning behind this solution (vs named exports).

MDX Fixtures

Creating MDX fixtures is as easy as configuring MDX for your bundler (opens in a new tab) and using the .mdx (or .md) file extension for your fixture files.