@rakuten-rex/storybook-inspecthtml
Inspect a React component HTML output
npm install @rakuten-rex/storybook-inspecthtml
11
Downloads per week

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);
...
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify