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 { StoryDefault } from "@ladle/react";

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

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:

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

export const MyStory: Story = () => <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 { StoryDefault, Story } from "@ladle/react";

type Props = { label: string };

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

const Card: Story<Props> = ({ label }) => <p>Label: {label}</p>;
Card.args = {
label: "Hello",
};