storybook/docs/snippets/react/decorator-parameterized-in-preview.ts.mdx
2024-04-30 22:21:31 -06:00

32 lines
862 B
Plaintext

```ts
// .storybook/preview.tsx
import React from 'react';
import { Preview } from '@storybook/react';
const preview: Preview = {
decorators: [
// 👇 Defining the decorator in the preview file applies it to all stories
(Story, { parameters }) => {
// 👇 Make it configurable by reading from parameters
const { pageLayout } = parameters;
switch (pageLayout) {
case 'page':
return (
// Your page layout is probably a little more complex than this ;)
<div className="page-layout"><Story /></div>
);
case 'page-mobile':
return (
<div className="page-mobile-layout"><Story /></div>
);
case default:
// In the default case, don't apply a layout
return <Story />;
}
},
],
};
export default preview;
```