Introducing Storybook Knobs

Edit React Props and Values on the Fly using Storybook

With Storybook we could write different stories with different states of UI components in our app.

We usually do that by passing UI different sets of props. Here are a few examples:

stories.add('with a button', () => {
  const style = {
    backgroundColor: '#FFF',
    border: '1px solid #DDD',
    borderRadius: 2,
    outline: 0,
    fontSize: 15,
    cursor: 'pointer',
  };
return (
    <button
      disabled={true}
      style={style}
    >
      Hello Button
    </button>
  );
});

But sometimes, it will be useful to change values of props on the fly without changing the code.

This is especially true for hosted storybook where we can’t change the code.

Introducing Storybook Knobs

That’s where Storybook knobs will help you. It will help you to edit the values of props. Have a look at the following video.

We do this via our knobs addon. It’s pretty easy to use.

After you’ve configured the knobs addon, you just need to write your story like this:

import {
  withKnobs,
  text, boolean, object,
} from '@kadira/storybook-addon-knobs';
const stories = storiesOf('Storybook Knobs', module);
stories.addDecorator(withKnobs);
stories.add('with a button', () => {
  const style = {
    backgroundColor: '#FFF',
    border: '1px solid #DDD',
    borderRadius: 2,
    outline: 0,
    fontSize: 15,
    cursor: 'pointer',
  };
return (
    <button
      disabled={boolean('Disabled', true)}
      style={object('Style', style)}
    >
      {text('Label', 'Hello Button')}
    </button>
  );
});

See the functions like boolean, object and text. First parameter of that is the Label and the next one is the default value.

Then it’ll show you a set of knobs in a panel where you can change values.

Power Tools

Even though knobs does a pretty simple thing it’ll comes with a set of Power Tools. Let me show them to you.

URL Params

Everything you do in knobs will be saved on the query params, so you can share the current link of the Storybook with your team and ask for feedback for what you’ve changed with Storybook.

This works best when you deploy your Storybook as a static web app.

Beyond Props

Even though we use Knobs to edit values of props, it’s a general purpose dynamic variable. You can use it anywhere in your stories. For example, this is something valid:

stories.add('as dynamic variables', () => {
  const name = text('Name', 'Arunoda Susiripala');
  const age = number('Age', 89);
const content = `I am ${name} and I'm ${age} years old.`;
  return (<div>{content}</div>);
});

Manual Changing Values

If you are doing some crazy stuff, you can change the value of any knob via an URL query param. We add a query param for each knob in the current story with the following format.

knob-<name of the Knob>

Now you can set values manually via query strings.

So, now it’s time for you to try out knobs in your Storybook. Use it and tell us how you are using it.

We are also looking for improvements and your help on improving knobs.

Aruna (roonyh) is the project lead of knobs and he’ll help you to sort out any issues you’ve encountered.

We are so happy to see you on our Slack or on GitHub.