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: [00:00] First, we're going to add the Knobs addon to our project. Then we register it in addons.js.
[00:08] 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.
[00:22] 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.
[00:40] 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.
[00:59] 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.
[01:14] 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.