@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