Decorators allow you to wrap the component in your story with another component. This is useful in a bunch of situations.

• You’re using React and your component expects to be wrapped in a context provider.
• You want to wrap a child component in a parent (e.g. you’re rendering a list item component, but you want to wrap each of them in the list component).
• You want to add some extra markup around the component itself. The official documentation using the example of adding some margin around the component.

Additionally, @storybook/addons-themes uses decorators to apply themes to your stories.

Refactoring Our Text Area

Let’s imagine that we have a task list that relies on a Context API.

We can add the following to our story or to the meta:

const meta = {
	title: 'Components/TaskList',
	component: TaskList,
	decorators: [
		(Story) => (
			<TaskListProvider
				tasks={[
					{ id: '1', title: 'Task 1', completed: false },
					{ id: '2', title: 'Task 2', completed: true },
				]}
			>
				<Story />
			</TaskListProvider>
		),
	],
} as Meta<typeof TaskList>;