Storybook: Controlling multiple components with the same knob

[CMatias]

Hi everyone, this is more of a question instead of an issue so apologies if this is the wrong place to ask. Please direct me to the correct place if that's the case and I'll close the issue right away.

I would like to control multiple components with the same knob. Example: I have a container and a Navbar which have light and dark colors. Instead of having a knob for each one to change between dark/light I would like to have a single knob so that if I change the color of one it changes the color of the other.

Other use case is for multiple input fields. It would be cool for the text knob to fill every input field so that the designer could test every type of input field for big/strange strings.

Is this possible with the current knobs addon?

Thank you in advance :)

[mrmckeb]

HI @CMatias, this is currently available - assuming the components are rendering in the same story. Otherwise, I don't know of a way...

If you want to manage themes across components, as an example, you could look to another addon for that - https://storybook.js.org/addons/addon-gallery/.

Another trick you could consider, is to store the 'shared knob' value in localStorage. So, as each component loads, you'd check localStorage and set the last used value as the initial/default for the knob.

Does any of that help you?

[CMatias]

* sigh *

I was declaring the knob variable outside of the story instead of inside. Once I moved it inside everything worked perfectly.

Thank you for your help @mrmckeb!

[mrmckeb]

I'm glad you worked it out! :)