New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-react-view
Storybook addon which makes your story source interactive
npm install storybook-addon-react-view
Last updated about 2 years ago
2
Downloads per week
Readme View on GitHub

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

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI