New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
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

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

Provide cookieDecorator to Storybook by editing ./storybook/preview.js.

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

export const decorators = [cookieDecorator];

Usage

You can pass cookie object into cookie parameter.

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
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI