@rakuten-rex/storybook-inspecthtml
v1.1.1
Published
Inspect a React component HTML output
Downloads
2
Readme
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
- webpack 4 (static module bundler)
- HTML5
- CSS3 & Sass (Normalize.css + Fork of Bootstrap project + ReX custom styles)
- JavaScript ES6 Modules & Components based on React
How to install
npm install @rakuten-rex/[email protected] --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);
...