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/>