New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,387
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-react-omit
Omit code from the source generated by storybook/addon-info
npm install storybook-react-omit
Last updated over 3 years ago
3
Downloads per week
Readme View on GitHub

storybook-react-omit

Small utility that allows you to omit code from the source generated by @storybook/addon-info. Check the live examples.

yarn add storybook-react-omit

Usage

Pass its parameters to storybook after adding the info addon.

(it prevents addon-info from showing the prop types of the <Omitted /> component)

// .storybook/config.js

import { configure, addDecorator, addParameters } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { withOmission } from 'storybook-react-omit'

addDecorator(
  withInfo({
    header: false,
    inline: true,
    propTablesExclude: withOmission([]), // ← add this line
  }),
)

Then call omit passing any valid JSX

import omit from 'storybook-react-omit'

// ...

.add('My story', () => (
  <MyComponent>
    This will be shown in the source
    {omit(
      <script>
        {`
            while(true) alert("but this won't")
        `}
      </script>
    )}
  </MyComponent>
))

Changing the displayName

By default omissions will be shown as <.../> because the component's displayName is ..., but you can use setDisplayName to change it:

// .storybook/config.js

import { withOmission, setDisplayName } from 'storybook-react-omit'

// ...

setDisplayName('source omitted') // <source omitted/>
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI