New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,101
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Jotai
A Storybook addon that allows you to use components in your stories that rely on Jotai Atoms and see internal Jotai state in a panel.
npm install @alexgorbatchev/storybook-addon-jotai
Last updated about 2 months ago
142
Downloads per week
Readme View on GitHub

Storybook Jotai Addon

A Storybook Addon and Decorator for Jotai 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-jotai

Register the addon in .storybook/main.js

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

Important

Please keep in mind that the addon wraps everything with Provider from jotai package. It's important that your story components don't include the Provider, otherwise the addon won't be able to see and set atom values.

Usage

Given a simple component:

import { useAtom, atom } from 'jotai';

const userAtom = atom(null);

export const Header = () => {
  const [user] = useAtom(userAtom);

  return (
    <div>
      {user ? (
        <div>
          <div>{`Logged in as ${user.name}`}</div>
          <Button size="small" label="Log out" onClick={() => setUser(null)} />
        </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 { atomsForStorybook } from '@alexgorbatchev/storybook-addon-jotai';
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';

import { User, userAtom } from './User';

type Story = ComponentStoryObj<typeof Header>;

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

export default meta;

export const JohnLoggedIn: Story = {
  parameters: {
    jotai: atomsForStorybook({
      atoms: {
        user: userAtom,
      },
      values: {
        user: {
          name: 'John Doe',
        },
      },
    }),
  },
};

// `jotai`, `atoms`, and `values` each can be a function for deferred evaluation.
export const JaneLoggedIn: Story = {
  parameters: {
    jotai: () => atomsForStorybook({
      atoms: () => ({
        user: userAtom,
      }),
      values: () => ({
        user: {
          name: 'Jane Doe',
        },
      }),
    }),
  };
};

export const LoggedOut: Story = {};

Strongly typed example:

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

import { User, userAtom } from './User';

interface StoryParameters extends JotaiParameters {}

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: {
    // `jotai` is strongly typed
    jotai: atomsForStorybook({
      atoms: {
        user: userAtom,
      },
      values: {
        user: {
          name: 'Jane Doe',
        },
      },
    }),
  },
};

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