react-mountif
Avoid the tedious writing of conditional rendering
Motivation
Very often while writing React code, you stumble upon the following pattern:
let hello;if thisstateshow hello = <Hello />;
This is quite tedious to write and it is a very common situation.
To avoid the boredom and keep on having fun, you can use this package, which comes in two different flavors, depending
on your bravery. ES6 classes and ES7 decorators are the new spicy ingredients you may wanna taste. Otherwise you can always fallback to an old fashioned createClass
.
How it works
Your component is wrapped. The wrapper's render
function checks if either
this.props.mountIf
isfalse
this.props.unmountIf
istrue
In which case, the render
method of the wrapper returns null
and nothing is displayed.
Otherwise it returns the wrapped component.
Examples
ES6 classes and ES7 decorators
;; @MountIfComponent { return <div>Hello World</div>; } Component { superprops; thisstate = show: false ; } { this; } { return <div> <button onClick=thishandleState> Click to toggle a nice greeting </button> <HelloWorld mountIf=thisstateshow /> </div> ; }
ES6, no classes
;; let HelloWorld = React; HelloWorld = ; const Example = React; ;