Storybook Addon Editable Context

Edit your react context in runtime trough a menu list in the toolbar.

Install

npm install -D storybook-react-editable-context

Usage

Add the following code to your .storybook/main.js file

module.exports = {
    addons: ['storybook-react-editable-context'],
};

Then add EditableContextDecorator either locally or globally. You will need to specify the react Context you want to edit, as well as the parameters you want to be able to edit, with the values you can choose and the default value.

For example, for adding it globally you can write the following:

const decorators = [
    editableContextDecorator(MyContext, [
        {
            name: "Param1 name",
            field: "param1",
            vals: ["value1", "value2"],
            names: ["Value 1", "Value 2"],
            default: "value1",
        },
        {
            name: "Param 2 name",
            field: "param2",
            vals: ["value1", "value2", "value3"],
            names: ["Value 1", "Value 2", "Value 3"],
            default: "value3",
        },
    ]),
];

Options

editableContextDecorator takes the following parameters:

• Ctx. The context that will be editable from the toolbar. It is created with CreateContext. Only contexts which are an object containing just string values are suported.
• params. The different parameters of the context that will be editable from the toolbar. Each parameters has its display name, its field's name, a list with all the values, a list containing the names for each value, and the default value (which overrides the context's default value for that field).