Displays a panel with an "html version" of a story, as suggested in this thread.
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 '@kadira/storybook'
import staticMarkup from 'react-storybook-addon-static-markup'
setAddon(staticMarkup)
configure(() => {
}, module)
...and register it in your .storybook/addons.js:
import '@kadira/storybook/addons';
import 'react-storybook-addon-static-markup/register';
Usage
import React from 'react';
import { storiesOf } from '@kadira/storybook';
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>
)
)