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
- [x] Stories by component types
- [x] HTML raw output
- [x] JSX output
- [x] Stories source code
- [x] 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
| Site | URL | |
|---|---|---|
 |
Github (Source Code) | https://github.com/rakuten-rex |
|
NPM (Package distribution) | https://www.npmjs.com/org/rakuten-rex |
 |
ZeroHeight (Documentation) | https://zeroheight.com/390c074f3 |
Project Stack
| Front-end |
|---|
 HTML5  CSS3 & Sass  JavaScript ES6  React |
| Tools |
|---|
 webpack  Storybook  Babel  ESLint  Prettier |
Features
| Styles features | JavaScript features |
|---|---|
| Theme support via CSS variables | React components splitted by type |
| Static CSS styles available for HTML/VueJS/AngularJS | Universal Module Definition support |
| Sass mixins for custom builds | |
| Reset CSS styles already bundled by HTML tags | |
| Removed duplicated CSS props | |
CSS classes prefix rex-
|
Browser Support
| PC | Mobile |
|---|---|
 Chrome 49+ |
 iOS 9+ (Safari 9.3+, Chrome 78+) |
 Safari 9.1+ |
 Android 6+ (Chrome 78+, Android Browser 76+) |
 Firefox 31+ |
|
 MS Edge 15+ |
|
 IE 11+ |