- 7Create Interactive Storybook Stories with the Knobs Decorator1m 33s
Create Interactive Storybook Stories with the Knobs Decorator
Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.
Here I show how to set up the Knobs decorator in Storybook to make your Storybook stories infinitely interactive based on their props, and not just your predefined Stories.
Instructor: First, we're going to add the Knobs addon to our project. Then we register it in addons.js.
Next, over in config.js we're going to import a new method called decorators, so add decorator. We're going to configure that with the withKnobs decorator from addon-knobs.
Now we're all set to use the knobs decorator. Just head over to the stories, import the appropriate knob. For example, I'm importing the text knob over here. Wherever I have text, I can now use the text knob to make it dynamic.
BG, so you just have a label here and then whatever text you want it to submit as your ordinary text. Now when I refresh my storybooks, you can see a new area called knobs.
Here I can change it to whatever I want. Let's just say, "Purple." It just changes to purple. It's reactive to whatever I do. This is very handy for testing any props that your components may have.
There are a whole range of other knobs, and I encourage you to read the docs to explore them. For example, since we're really using colors here, I can say for the color knob I can have a default value of green. I can also have a color-picker over here and pick a different color based on whatever I want.