Friday, 27 May 2022

Storybook: Render a component by clicking on a link (React)

I've got a component, 'Dialog', that renders a modal dialog box basically, when a user clicks on a link or button to invoke/open the dialog. I'm building a storybook component for the Dialog component, and so I need to be able to have a clickable HTML element (anchor tag or button, preferably anchor tag) and open the Dialog component when that clickable HTML element is clicked. I don't know how to go about this in Storybook.

Here is my storybook element as it exists so far:

const Template: ComponentStory<typeof Dialog> = (args) => <Dialog {...args} />;

export const Regular = Template.bind({});

Regular.args = {
    type:"regular",
    show: false,
    children: "Content of Dialog Box",
    dismissable: true,
    classNames: "",
    maxWidth: "1000px",
    displayBoxShadow: true,
    renderOnLoad: false,
}

An example of an implementation of this component/story would be a Log In button that, when clicked, would render a slide-out dialog with appropriate fields (children). I'm trying to implement the Dialog part of the story, as the Dialog component is invoked when another HTML object on page is clicked/interacted with.



from Storybook: Render a component by clicking on a link (React)

No comments:

Post a Comment