react-conditions
v0.0.9
Published
Component for rendering condition content.
Downloads
4
Readme
React Conditional
TODO
PLease, always remember that children are going to be evaluated always to be sent to the component, so the next code would break:
var { Conditional, If, Switch } = require('react-conditions');
<If test={typeof foo !== 'undefined'}>
<span>{foo.bar}</span>
</If>
It would break because foo is going to be undefined and the span children is going to be evaluated althougt wouldn't be render in the DOM.
Demo & Examples
Live demo: TODO
To build the examples locally, run:
npm install
gulp dev
Then open localhost:8000
in a browser.
Installation
TODO
Usage
TODO
var { Conditional, If, Switch } = require('react-conditions');
<If test={true}>
<span>Hello</span>
</If>
var { Conditional, If, Switch } = require('react-conditions');
<If test={function() { return 1 === 2}}>
<span>Hello</span>
</If>
var { Conditional, If, Switch } = require('react-conditions');
<Conditional>
<Conditional.If test={function() { return 'foo' === 'bar';}}>
Hello
</Conditional.If>
<Conditional.ElseIf test={function() { return 'foo' === 'foo';}}>
Hello2
</Conditional.ElseIf>
</Conditional>
var { Conditional, If, Switch } = require('react-conditions');
<Conditional>
<Conditional.If test={true}>
Hello
</Conditional.If>
<Conditional.ElseIf test={true}>
Hello2
</Conditional.ElseIf>
</Conditional>
var { Conditional, If, Switch } = require('react-conditions');
<Conditional>
<Conditional.If test={false}>
Hello
</Conditional.If>
<Conditional.ElseIf test={false}>
Hello2
</Conditional.ElseIf>
<Conditional.Else >
Else
</Conditional.Else>
</Conditional>
var { Conditional, If, Switch } = require('react-conditions');
<Switch value="foo" breakInMatch={false}>
<Switch.Case testValue="bar">
BAR
</Switch.Case>
<Switch.Case testValue="foo">
Foo
</Switch.Case>
<Switch.Default>
Default
</Switch.Default>
</Switch>
var { Conditional, If, Switch } = require('react-conditions');
<Switch value="foo" breakInMatch={false}>
<Switch.Case testValue="bar">
BAR
</Switch.Case>
<Switch.Case testValue="foo">
Foo
<Switch.Break />
</Switch.Case>
<Switch.Default>
Default
</Switch.Default>
</Switch>
var { Conditional, If, Switch } = require('react-conditions');
<Switch value="bar">
<Switch.Case testValue="bar">
BAR
</Switch.Case>
<Switch.Case testValue="foo">
Foo
</Switch.Case>
<Switch.Default>
Default
</Switch.Default>
</Switch>
Properties
- DOCUMENT PROPERTIES HERE
Notes
ADDITIONAL USAGE NOTES
License
MIT. Copyright (c) 2015 Alejandro Sellero.