Narrowly Preventing Mayhem

    storybook-addon-react-view

    0.0.2 • Public • Published

    Storybook Addon React View

    Storybook addon which makes your story source interactive Storybook Addon React View.

    Demo: https://jmarceli.github.io/storybook-addon-react-view/ Demo code: docs-source

    Installation

    If you need to add it to your Storybook, you can run:

    npm i -D storybook-addon-react-view

    Configuration

    Then, add following content to .storybook/main.js:

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

    Usage

    Simple:

    import React from "react";
    import { Component, ABC, myFun } from "./Component";
    import { withReactView } from "storybook-addon-react-view/register";
     
    export const ComponentStory: React.FC<{}= () => (
      <Component title="X">
        <div>{ABC}</div>
        <div>{myFun()}</div>
      </Component>
    );
     
    export default {
      title: "Component",
      component: Component,
      decorators: [withReactView],
      parameters: { useView: { scope: { Component } } },
    };

    or with @storybook/addon-docs:

    import React from "react";
    import { Component, ABC, myFun } from "./Component";
    import { withReactView } from "storybook-addon-react-view/register";
     
    export const ComponentStory: React.FC<{}= () => (
      <Component title="X">
        <div>{ABC}</div>
        <div>{myFun()}</div>
      </Component>
    );
     
    export default {
      title: "Component",
      component: Component,
      decorators: [withReactView],
      parameters: { useView: { scope: { Component, ABC, myFun } } },
    };

    License

    MIT

    Author

    Jan Grzegorowski

    Install

    npm i storybook-addon-react-view

    DownloadsWeekly Downloads

    1

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    12.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • jmarceli