New
Community Showcase #5Visual test with Chromatic
Star79,046
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Readme View on GitHub

Storybook Addon Cookie

demo

Support Storybook v7

Starting with storybook-addon-cookie v3, it supports storybook v7.

Use v2.x if you're using storybook v6.x.

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.

Join the community
6,200 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI