Decorators

Wrapping components in fixtures can become repetitive. Decorators can be used to apply context providers (or any other wrapper) to a subset of fixtures.

A cosmos.decorator file looks like this:

export default ({ children }) => <Provider store={store}>{children}</Provider>;

The rules for decorators are:

• A decorator must be placed in a file named cosmos.decorator.{jsx,tsx}.
• A decorator must be a default export.
• A decorator is a React component that receives a children prop.
• A decorator only applies to fixture files contained in the decorator's directory.
• Decorators can be composed, in the order of their position in the file system hierarchy (from outer to inner).

A decorator file can also export an array of decorators:

export default [Decorator1, Decorator2, Decorator3];