fbredius/storybook

View on GitHub
docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx

Summary

Maintainability
Test Coverage
```ts
// YourComponent.stories.ts|tsx

import { ComponentMeta } from '@storybook/react';

import { YourComponent } from './YourComponent';

// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
// Useful to prevent the full remount of the component's story.
export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'YourComponent',
  component: YourComponent,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        {Story()}
      </div>
    ),
  ],
} as ComponentMeta<typeof YourComponent>;
```