Decorators

Ladle supports story decorators, so you can wrap all stories in a file with additional React component(s). This is useful if your stories/components rely on React Context and libraries like react-router or redux. In the example bellow , we are adding an extra margin: 3em to each story:

import type { StoryDecorator } from "@ladle/react";

export default {
  decorators: [
    (Component) => (
      <div style={{ margin: "3em" }}>
        <Component />
      </div>
    ),
  ] as StoryDecorator[],
};

decorators is an array, so you can compose multiple components together. You can also set a global decorator or provider.

Decorators can be also applied to a specific story:

export const MyStory = () => <div>My Story</div>;

MyStory.decorators = [
  (Component) => (
    <div style={{ margin: "3em" }}>
      <Component />
    </div>
  ),
];

Context Parameter

You can also access Ladle's context through the second parameter. This way your decorators can control every aspect of Ladle including the state of controls and other addons:

import type { Story, StoryDecorator } from "@ladle/react";

export default {
  decorators: [
    (Component, context) => (
      <div style={{ margin: "3em" }}>
        {context.globalState.control.label.value}
        <Component />
      </div>
    ),
  ] as StoryDecorator[],
};

const Card: Story<{
  label: string;
}> = ({ label }) => <p>Label: {label}</p>;

Card.args = {
  label: "Hello",
};