New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,670
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@rakuten-rex/storybook-inspecthtml
Inspect a React component HTML output
npm install @rakuten-rex/storybook-inspecthtml
Last updated over 3 years ago
6
Downloads per week
Readme View on GitHub

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);
...
Join the community
6,060 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI