Documentation
Decorators

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:

cosmos.decorator.js
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 cosmos.decorator file placed in the root source directory applies to all fixtures.

A decorator file can also export an array of decorators:

cosmos.decorator.js
export default [Decorator1, Decorator2, Decorator3];