react-then-else
Render component with condition in React
This component turns this
{ return <div> <Header /> this <Footer /> </div> ;} { return thispropsage >= thispropsdrinkingAge ? <span class="ok">Have a beer thispropsname!</span> : <span class="not-ok">Sorry thispropsname you are not old enough</span>;}
into this
{ return <div> <Header /> <If condition= thispropsage >= thispropsdrinkingAge > <Then> <span class="ok">Have a beer thispropsname!</span> </Then> <Else> <span>Sorry thispropsname you are not old enough</span> </Else> </If> <Footer /> </div> ;}
Install
NPM:
npm install react-then-else
Example
;; Component { return <div> <If condition= thispropsage >= 16 tag='header'> <Then>Have a beer thispropsname!</Then> <Else style=textAlign: 'center' onClick=thisonElseClick> <span>Sorry thispropsname you are not old enough</span> <div> <p>One more</p> <If condition= thispropsage >= 15 > <Then>You are 15 years old</Then> </If> </div> </Else> <p>You always see me!</p> </If> </div> ; } );
// ES2015; // CommonJS:const If Then Else = ;
API
<If />
Property | Type |
---|---|
condition |
Boolean |
tag |
String or Function |
any others props | Any Type |
If condition
evaluates to true
, renders the <Then />
block will be rendered, otherwise renders the <Else />
block. Either block may be omitted.
Default, <If />
and <Then />
and <Else />
will wrap children in div
tag, if you want wrap it in others html tag, you can set property tag
to your tag name, e.g. <If condition={true} tag='footer'>
or <Then tag='h1'>
or <Else tag='a' onClick={this.onClick}>
This component can contain any number of <Then />
or <Else />
blocks, and you can containe <If />
in the <Then />
or <Else />
blocks.
<Then />
If condition
evaluates to true
, renders it.
<Else />
If condition
evaluates to false
, renders it.
License
GPL-3.0