@rakuten-rex/storybook-inspect-jsx v1.3.4

ReX React UI Component: storybook-inspect-jsx

This project is part of ReX Design System and it can be used to create UI Components compatible with:

React, HTML/CSS and Vue.js

How to install

npm install @rakuten-rex/storybook-inspect-jsx@1.3.4 --save

yarn add @rakuten-rex/storybook-inspect-jsx@1.3.4

Getting started

Storybook Live examples

For a complete guide of properties for React and HTML classes please visit our Storybook page:

https://rakuten-rex.github.io/storybook-inspect-jsx/

Storybook features

• Stories by component types
• HTML raw output
• JSX output
• Stories source code
• Knobs with multiple options

Storybook integration

Register

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

import '@rakuten-rex/storybook-inspect-jsx/register';

Story

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.

Example:

Using MyComponent.stories.jsx:

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

const stories = storiesOf('MyComponent', module);
stories.addDecorator(withInspectJsx); // <-- First decorator
stories.addDecorator(withKnobs);
stories.addDecorator(withA11y);
...

Documentation, source code and distribution

Project Stack

Features

Browser Support