New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
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-inspectjsx
Inspect a React component JSX output
npm install @rakuten-rex/storybook-inspectjsx
Last updated over 3 years ago
2
Downloads per week
Readme View on GitHub

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI