node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »

@yuanchuan/cond

Cond

Lisp-like conditional statement for JSX

Installation

npm install yuanchuan/cond --save

Examples

like if statement
import { cond } from '@yuanchuan/cond';
 
<div>
  { cond(n > 0,
      (<div>hello world</div>)
  )}
</div>
like if...else statement
<div>
  { cond(
      n > 0, (<div>hello world</div>),
      true,  (<div>nothing</div>)
  )}
</div>
like if...else if... statement
<div>
  { cond(
      n == 3, (<div>hello world</div>),
      n == 6, (<div>something</div>),
      n == 9, (<div>something else</div>),
      true,   (<div>default</div>)
  )}
</div>

Shortcuts

If
import { If } from '@yuanchuan/cond';
 
<div>
  { If(n > 0,
      (<div>hello world</div>)
  )}
</div>
If...else
<div>
  { If(n > 0,
      (<div>hello world</div>),
      (<div>something else</div>)
  )}
</div>
unless
import { unless } from '@yuanchuan/cond';
 
<div>
  { unless(n != 0,
      (<div>hello world</div>)
  )}
</div>

Extend cond

let condOdd = cond((a, b) => (a % 2 ? b : null));
 
<div>
  { condOdd(number, (
      <div>odd number</div>
  )}
</div>
let condThenWrap = cond((a, b) => {
  if (a) {
    return (
      <div className="deepNested">
        { b }
      </div>
    );
  }
});
 
<div>
  { condThenWrap(
      n == 3, (<div>hello world</div>),
      n == 6, (<div>something</div>),
      n == 9, (<div>something else</div>),
      true,   (<div>default</div>)
  )}
</div>

License

MIT