New
Build your own Storybook GPTVisual test with Chromatic
Star81,173
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',
  ],
};

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.

Encoding cookie

If you want to encode the cookies on the panel, you can use the cookieEncoding option.

export const WithEncodedCookie: Story = {
  parameters: {
    cookie: {
      test: 'TEST!',
    },
    cookieEncoding: true,
  },
};

This option defaults to false.

You can use this option after v3.1.0

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI