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:
Component { let color = thisprops; let $node = color ? <ColorSwatch color=color/> : null; return <div> $node </div> ; } Component { if thispropscolor return <ColorSwatch color=thispropscolor/>; } { return <div> this </div> ; }
They are even harder in nested scenarios. This is much easier for our non-JS gurus (and shorter with more clarity around purpose):
Component { let color = thisprops; 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:
babelcode