New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,099
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
localStorage
A Storybook addon that allows you to mock `localStorage` data
npm install @alexgorbatchev/storybook-addon-localstorage
Last updated 3 months ago
196
Downloads per week
Readme View on GitHub

Storybook LocalStorage Addon

A Storybook Addon and Decorator for window.localStorage and track the state in a Panel.

If you want to setup parameters to be strongly typed, see @alexgorbatchev/storybook-parameters.

Install

yarn add -D @alexgorbatchev/storybook-addon-localstorage

Register the addon in .storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.tsx'],
  addons: ['@alexgorbatchev/storybook-addon-localstorage'],
};

Usage

Given a simple component:

export const Header = () => {
  const [user, setUser, { removeItem }] = useLocalStorage<{ name: string }>('user');

  return (
    <div>
      {user ? (
        <div>
          <div>{`Logged in as ${user.name}`}</div>
          <Button size="small" label="Log out" onClick={() => removeItem()} />
        </div>
      ) : (
        <div>
          <div>No one is signed in</div>
          <Button size="small" label="Log in" onClick={() => setUser({ name: 'John' })}/>
        </div>
      )}
    </div>
  );
};

You can write a story as

import { localStorageForStorybook } from '@alexgorbatchev/storybook-addon-localstorage';
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';

import { Header } from './Header';

type Story = ComponentStoryObj<typeof Header>;

const meta: ComponentMeta<typeof Header> = {
  title: 'Header',
  component: Header,
};

export default meta;

export const JohnLoggedIn: Story = {
  parameters: {
    // this helper automatically stringifies the values using `JSON.stringify`
    localStorage: localStorageForStorybook({
      value: 123,
      user: { name: 'John' },
    }),
  },
};

export const JaneLoggedIn: Story = {
  parameters: {
    // if you have own serialzer, you can use it as well
    localStorage: {
      value: '123',
      user: JSON.stringify({ name: 'Jane' }),
    },
  },
};

export const LoggedOut: Story = {};

Strongly typed example:

import { ComponentMeta, ComponentStoryObj } from '@alexgorbatchev/storybook-parameters';
import { LocalStorageParameters } from '@alexgorbatchev/storybook-addon-localstorage';

interface StoryParameters extends LocalStorageParameters {}

const Header = () => <div>Header</div>;

type Story = ComponentStoryObj<typeof Header, StoryParameters>;

const meta: ComponentMeta<typeof Header, StoryParameters> = {
  title: 'Header',
  component: Header,
};

export default meta;

export const JohnLoggedIn: Story = {
  parameters: {
    // `localStorage` is strongly typed
    localStorage: {
      key: 'value',
    }
  },
};

Development scripts

  • yarn start runs babel in watch mode and starts Storybook
  • yarn build build and package your addon code
Join the community
6,514 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI