@rakuten-rex/storybook-inspecthtml

ReX React UI Components Library

Storybook Addon InspectHTML: storybook-inspecthtml

The addon use the original story to get the HTML output from the React component by using ReactDOM server and show it into the panels tab, after that it returns the original story without any changes.

For more information visit:

Github
https://github.com/rakuten-rex

NPM
https://www.npmjs.com/org/rakuten-rex

How it was built

1. webpack 4 (static module bundler)
2. HTML5
3. CSS3 & Sass (Normalize.css + Fork of Bootstrap project + ReX custom styles)
4. JavaScript ES6 Modules & Components based on React

How to install

npm install @rakuten-rex/storybook-inspecthtml@1.1.1 --save-dev

Live examples

For a complete guide of properties for React and HTML classes please visit the Storybook site:

https://rakuten-rex.github.io/storybook-inspecthtml/

Storybook integration

Register

Add this line at the end of the content of .storybook/addons.js.

import '@rakuten-rex/storybook-inspecthtml/register';

Story

Import the addon in the story file you want to use.
Add it as the first decorator due to the addon requires a clean input to render the HTML, the output is clean as well.

Example:

Using stories/index.jsx:

import { withInspectHtml } from '@rakuten-rex/storybook-inspecthtml';

const stories = storiesOf('MyComponent', module);
stories.addDecorator(withInspectHtml); // <-- First decorator
stories.addDecorator(withKnobs);
stories.addDecorator(withA11y);
...