jsx-xray

jsx-xray

JSX Xray for React is a component that will render its children but will also reverse engineer their jsx, and print it along side in a popover box. This is handy for storybook demos where you want to have a working example, but also wish to provide sample jsx without having to hard code it. As a bonus, it also uses prism to highlight syntax and since it's computing the jsx, as you interact with your storybook demos, the jsx always matches what's rendered on screen.

#Github https://github.com/oshoghi/jsx

Usage

Anything wrapped in the component will get rendered alongside its associated jsx.

import React, { Component } from "react";
import { RockerButton } from "ui-lib"
import Jsx from "jsx-xray";

class Story extends Component {
    static state = { index: 0 };

    _handleRockerButtonClick = (index) => {
        this.setState({ index });
    };

    render () {
        return (
            <Jsx>
                <RockerButton 
                    labels={["button 1","button 2","another button"]}
                    selected={this.state.index}
                    className="autowidth"
                    onClick={this._handleRockerButtonClick} />
            </Jsx>
        )
    }
}

#Options JSX XRay comes with some reasonable defaults but you can override these by passing it the appropriate props:

substituteThreshold

The default value is 40 chars. This prop controls the length at which point XRay will swap out prop values and substitute them with variables. Eg:

<Jsx substituteThreshold={15}>
    <RockerButton 
        labels={["button 1","button 2","another button"]}
        selected={this.state.index}
        className="autowidth"
        onClick={this._handleRockerButtonClick} />
</Jsx>

This will cause the outputted jsx to look like this:

const labels = ([
    "button 1",
    "button 2",
    "another button"
]);

<RockerButton
    labels={labels}
    selected={-1}
    className="autowidth"
    onClick={function () {...}} />

oneLineThreshold

The default value for this prop is 64 chars. This prop controls at what length XRay will break a jsx line into multiple lines.