Static Markup addon for React Storybook

Displays a panel with an "html version" of a story, as suggested in this thread.

Live demo

Installation

Install the package:

npm i -D react-storybook-addon-static-markup

Then set the addon in your .storybook/config.js:

import { configure, setAddon } from '@storybook/react'

import staticMarkup from 'react-storybook-addon-static-markup'

setAddon(staticMarkup)

configure(() => {
  // ...
}, module)

...and register it in your .storybook/addons.js:

import 'react-storybook-addon-static-markup/register';

Usage

import React from 'react';
import { storiesOf } from '@storybook/react';

import { ShowStaticMarkup } from '../src'

storiesOf('Usage examples', module)
  .add(
    'with HOC',
    () => (
      <ShowStaticMarkup>
        <button className="foo bar baz">
          hello!
        </button>
      </ShowStaticMarkup>
    )
  )
  .addWithStaticMarkup(
    'with a "shortcut" method',
    () => (
      <div className="foo">
        hello
        <button className="btn primary">
          world!
        </button>
      </div>
    )
  )