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.