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

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);
...
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