CODEWITHSUNDEEP
reactjsstorybook
Nir Tzezana
Nir Tzezana

Reputation: 2342

Storybook hide or show args specific to a story

I have a Storybook project and a component that looks like this:

export default {
    title: 'MDButton',
    argTypes: {
        label: {
            name: "Label",
            defaultValue: "Button",
            control: {
                type: "text"
            }
        },
        disabled: {
            name: "Disabled",
            defaultValue: false,
            control: {
                type: "boolean"
            }
        }
   }
};

These are the stories:

export const Default = Template.bind({});
Default.args = {};

export const WithDisabled = Template.bind({});
WithDisabled.args = {};

I want the first story to not have the disabled arg.
Is that possible?
I know I can go over args and filter out the things I don't want, but what if I have tons of args?

Upvotes: 0

Views: 6112

Answers (1)

user1247458
user1247458

Reputation: 109

You can disable specific arg prop with a next code. Example in MDX-format.

<Meta
  title="Title"
  component={YourComponent}
  argTypes={{
    icon: { table: { disable: true } },
    label: { table: { disable: true } },
    onClick: { table: { disable: true } },
  }}
/>

Good luck!

Upvotes: 3

Related Questions