storybook-addon-cookie

Storybook Addon Cookie

Features

• Set document.cookie for each Storybook.

Live demo

Installing and Setup

Install addon

With npm:

npm i storybook-addon-cookie -D

Or with yarn:

yarn add storybook-addon-cookie -D

Configure the addon

Add package to storybook configuration.

// .storybook/main.js
module.exports = {
  addons: [
    // ..other addons
    "storybook-addon-cookie",
  ]
}

If you want to use it only in a specific story, you can provide cookieDecorator to story.

But you can't control cookie by the panel.

// Component.stories.jsx
import React from 'react';
import Component from './Component';

import { cookieDecorator } from 'storybook-addon-cookie';

export default {
  title: 'Component',
  compoent: Component,
  decorators: [cookieDecorator],
};

Usage

You can pass cookie object into cookie parameter.

Or control cookie by addon panel.

export default {
  component: Example,
  title: 'Example',
}

const Template = () => <Example/>

export const WithCookie = Template.bind({});
WithCookie.parameters = {
  cookie: {
    test: 'TEST!',
  }
}

export const WithOutCookie = Template.bind({});

Each Story has independent cookie.