jsxcond

    0.1.0 • Public • Published

    JSXCOND

    Build Status js-standard-style npm

    Installation

    npm install jsxcond --save
    

    Usage

    if-else-then

    _if (TEST_FORM, THEN_FORM, [ELSE_FORM])

    • Common Usage
    import React from 'react';
    import { _if } from 'jsxcond'
     
    class SomeComponent extends React.Component {
      render() {
        const condition = true;
        <div>
          {_if ( condition, () => (
            <span>
              condition is true
            </span>
          ), () => (
            <span>
              condition is false
            </span>
          ))}
        </div>
      }
    }
    • Only if, no else
    import React from 'react';
    import { _if } from 'jsxcond'
     
    class SomeComponent extends React.Component {
      render() {
        const condition = true;
        <div>
          {_if ( condition, () => (
            <span>
              condition is true
            </span>
          ))}
        </div>
      }
    }
    • TEST_FORM can be a function
    import React from 'react';
    import { _if } from 'jsxcond'
     
    class SomeComponent extends React.Component {
      render() {
        const condition = true;
        <div>
          {_if ( () => {
            return true
          }, () => (
            <span>
              condition is true
            </span>
          ), () => (
            <span>
              condition is false
            </span>
          ))}
        </div>
      }
    }
    • Recommend using () => () to have lazy eval(). However THEN_FORM and ELSE_FORM are still supported.
    import React from 'react';
    import { _if } from 'jsxcond'
     
    class SomeComponent extends React.Component {
      render() {
        const condition = true;
        <div>
          {_if ( condition, 'condition is true', (
            <span>
              condition is false
            </span>
          ))}
        </div>
      }
    }

    cond

    if-else-then

    _cond (STATEMENT1, STATEMENT2...)

    STATEMENT can be array, function, common value:

    • When it is a value, it will be returned immediately.

    • When it is a function, it will be evaluated and returned immediately.

    • When it is a array, the first value will be used as TEST_FORM, and the second will be used as THEN_FORM.

    • Common Usage

    import React from 'react';
    import { _cond } from 'jsxcond'
     
    class SomeComponent extends React.Component {
      render() {
        const condition = 3
        <div>
          {_cond (
            [condition === 1, () => (
              <span>
                condition is 1
              </span>
            )],
            [condition === 2 , () => (
              <span>
                condition is 2
              </span>
            )], () => (
              <span>
                Otherwise
              </span>
            )}
        </div>
      }
    }
    • TEST_FORM can be a function
    import React from 'react';
    import { _cond } from 'jsxcond'
     
    class SomeComponent extends React.Component {
      const condition = 3;
      render() {
        <div>
          {_cond (
            [
              () => {
                return condition === 1
              }, () => (
                <span> condition is 1 </span>
              )
            ],
            [
              () => {
                return condition === 2
              }, () => (
                <span> condition is 2 </span>
              )
            ]
          )}
        </div>
      }
    }

    License

    MIT

    Install

    npm i jsxcond

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • kouhin