Learn how to manage states natively in Storybook

Changing args values / state in Storybook (without useState hook) + ReactJS

A quick glance at how to change your stories args values within Storybook and ReactJs. To be combined with Storybook Controls.

If you find yourself wondering how to add functionality to your Storybook components that implies modifying your props values check out below.

For this article, I will assume that you already know what StoryBook is and that your are using StoryBook Controls add-on.

An example based on a true story

We have a story in which changing a certain prop in the playground’s controls should change a prop from your component.

We have this nice modal component that is opened whenever its isOpen property is true .

What are my options here to show or hide this Modal in my Story? Let’s see…

Have a ‘control’ for the property that allows me to change to true-false.

Before we move on, if you are wondering how to use ‘controls’ add-on in the first place, check out this other article I have on this.

Having a control property that simple changes the prop value

Problem solved. It mostly does what we need to. You could leave it like that if you don’t want to show any other behaviour (like closing with a button) and if you are ok with that blick white background shown when it is closed.

And you are also ok with the fact that your ‘Close button” has no functionality because it cannot change the value of isOpen when clicked on the Story.

Cons of this approach:

• You need to set the isOpen prop as true in order to show something when the user opens the story
• If you do so, the modal will also be open in your documentation tab and guess what? your Modal close button does not do anything and won’t be able to dismiss it from the documentation tab.
• It doesn’t feel pretty intuitive for the user right?

Ignore the args properties and use useState hook instead.

With this approach, you can mostly handle UI elements to change the props passed down to your component in your story. However, using this basically undermines the functionality of args , and causes ‘controls’ add-on to be out of sync with your props and your component.

For this approach to work properly you should disable the controls related to the props you are changing with the useState hook.

See that the isOpen is not synced with the component prop now?

The native useArgs hook

This is so far the best approach I found🕵️‍♀️ to solve this. It requires using the @storybook/client-api library in order to be able to apply the useArgs hook.

This hook provided by the Storybook library directly modifies the props passed down to your story component. This way you can add functionality to UI elements in your story and also keep controls synced with your props.

In this story, I have also added a button to handle the open without the need to use the control, while they keep perfectly synced.

It is as easy as importing the useArgs hook, and applying it to the properties you want to change (check line 23 and 28 for example)

Using this is pretty simple and straight-forward, but please feel free to leave a comment 💬 if you would like to clarify or suggest anything :)

I hope this helps you in making awesome and interactive stories.

Peace & Code

Nadine