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.