@rakuten-rex/storybook-inspectjsx
v1.2.1
Published
Inspect a React component JSX output
Downloads
4
Readme
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
- webpack 4 (static module bundler)
- HTML5
- CSS3
- 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-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);
...