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

Preserve existing cookies

If you want to preserve existing cookies, you can use the cookiePreserve option.

Preserve existing cookies, but only manipulate the ones you specify via parameters.

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

This option defaults to false.

You can use this option after v3.2.0

Join the community
6,583 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI