Storybook Addon InspectHTML

storybook-inspecthtml

With this addon you can see the HTML rendered by a React component right into the tabs panel.
The idea to use this addon, came from our Front-end team after start to work in our ReX React UI Components Library.

How it was built

1. Build tool: webpack 4
2. JavaScript component: React
3. Base code structure inspired by Notes addon
4. Created with ReX React UI Component Starter Kit

How it works

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.

How to install

npm install storybook-inspecthtml --save-dev

How to add it to your project

Register the addon

Add the following code into .storybook/addons.js:

import 'storybook-inspecthtml/register';

Add the addon as decorator of your story

Add the following code into your story, usually is under stories/index.js or stories/index.jsx:

Note: Make sure you add the addon as the first decorator before any other decorator that might alter the original HTML output of your component.

Example:

import { withInspectHtml } from 'storybook-inspecthtml';

const stories = storiesOf('InspectHtmlDemo', module);
stories.addDecorator(withInspectHtml); // <- here before the other decorators
stories.addDecorator(checkA11y);
stories.addDecorator(withKnobs);
stories.addDecorator(withInfo);

// Stories
stories.add('default', () => <InspectHtmlDemo />);

Live demo

Check the Storybook site at Github pages:

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