babel-plugin-jsx-display-if

We use JSX because we want HTML gurus to maintain the JSX in our React Components.

These examples are hard for non-JS people to modify and understand:

class Example extends React.Component {
    render() {
        let {
            color
        } = this.props;
        let $node = color ? <ColorSwatch color={color}/> : null;
        return (
            <div>
                {$node}
            </div>
        );
    }
}

class Example2 extends React.Component {
    renderColor() {
        if (this.props.color) {
            return <ColorSwatch color={this.props.color}/>;
        }
    }
    render() {
        return (
            <div>
                {this._renderColor()}
            </div>
        );
    }
}

They are even harder in nested scenarios. This is much easier for our non-JS gurus (and shorter with more clarity around purpose):

class Example extends React.Component {
    render() {
        let {
            color
        } = this.props;
        return (
            <div>
                <ColorSwatch display-if={color} color={color}/>
            </div>
        );
    }
}

Use

Install with npm install --save-dev babel-plugin-jsx-display-if. Then, add the plugin section to your .babelrc:

{
    "optional": [...],
    "loose": [...],
    "plugins": ["jsx-display-if"]
}

If for some reason you are using babel programatically:

babel.transform(code, {
    plugins: ['jsx-display-if'],
}).code