Nine Pedestrians Mesmerized

    @pioneers-team/storybook-addon-react-runner
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2-1 • Public • Published

    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,
        },
      },
    };

    Install

    npm i @pioneers-team/storybook-addon-react-runner

    DownloadsWeekly Downloads

    3

    Version

    0.3.2-1

    License

    MIT

    Unpacked Size

    27.4 kB

    Total Files

    43

    Last publish

    Collaborators

    • edrishn