@rakuten-rex/storybook-inspectjsx

ReX React UI Components Library

Storybook Addon InspectJSX: storybook-inspectjsx

The addon use the original story to get the original JSX of a React component by using jsx-to-string 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
4. JavaScript ES6 Modules & Components based on React

How to install

npm install @rakuten-rex/storybook-inspectjsx@1.2.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-inspectjsx/

Storybook integration

Register

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

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

Story

Import the addon in the story file you want to use.
Add it before other decorators, due to the addon requires a clean input to render the JSX component, the output is clean as well.

Example:

Using stories/index.jsx:

import { withInspectJsx } from '@rakuten-rex/storybook-inspectjsx';

const stories = storiesOf('MyComponent', module);
stories.addDecorator(withInspectJsx);
stories.addDecorator(withKnobs);
stories.addDecorator(withA11y);
...