React Runner Storybook Addon

Storybook addon to provide react live preview powered by react-runner, try live example

Install

# Yarn
yarn add storybook-addon-react-runner

# NPM
npm install --save storybook-addon-react-runner

Then add the addon to your configuration in .storybook/main.js

module.exports = {
  addons: ["storybook-addon-react-runner"],
};

Configuration

Configure scope and more by adding the following to .storybook/preview.js

import * as components from "../your-components";

export const parameters = {
  reactRunner: {
    disable, // whether to disable the addon
    scope: {
      ...components,
      ...otherScope,
    },
    wrapper, // pass a React Component to have it rendered around the story
    language, // defautls to `jsx`, set to `tsx` to support typescript
    theme, // https://github.com/FormidableLabs/prism-react-renderer#theming
    readOnly, // code editor will be readonly if set to `true`
  },
};

You can change configuration based on story or component

Note: HMR (hot module replacement) won't work if you set scope via global parameters, a full reload will be performed

Usage

Write your stories in your favourite way or with source code directly

export const Source = {
  parameters: {
    storySource: {
      source: `<Button label="Source code" />`,
    },
  },
};

Or even real example with import statement

import ButtonStory from "./Button.story";
import ButtonStorySource from "!!raw-loader!./Button.story";

export const Complex = ButtonStory;
Complex.parameters = {
  storySource: {
    source: ButtonStorySource,
  },
  reactRunner: {
    // you can define your scope in `.storybook/preview.js`
    scope: {
      import: {
        react: React,
        "./Button": { Button },
      },
    },
  },
};

Button.story.js

import { useState } from "react";
import { Button } from "./Button";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>{count}</div>
      <Button label="+" onClick={() => setCount((count) => count + 1)} />
      <Button label="-" onClick={() => setCount((count) => count - 1)} />
    </>
  );
}

Decorators

This addon only works with global decorators, for component or story decorators, you can use wrapper as an alternative

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    reactRunner: {
      wrapper: YourProvider,
    },
  },
};