Skip to main content

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",
};

Do you want to work on Ladle and other web tooling? Our team at Uber is hiring!