Search code examples
reactjsstorybook

@storybook/addon-controls: howto not auto-generate control for a certain prop

@storybook/addon-controls is fun, however I cannot find a way to disable control generation for a given arg. Lets say I have a component prop that is an event handler and I obviously do not want it to have a control. So I want it to appear in the list of props with the name, type and description, but no control. How do I do that?

Solution

  • this was recently added: https://github.com/storybookjs/storybook/pull/11388 Essentially you should be able to use control.disable within argTypes for a given arg.

    Suppose you have a story with foo and bar properties (auto-generated or otherwise) and you want to hide the foo row completely and disable controls for the bar row on a specific story:

    MyStory.argTypes = {
  foo: { table: { disable: true } },
  bar: { control: { disable: true } },
};

    Here's the entry in the docs.

    Cheers