react-conditioner

    1.1.0 • Public • Published

    npm version

    How many times have you written ternary statements like this in your JSX code?

    class YourComponent extends Component {
      render() {
        return (
          <div>
            { loading
              ? <Loading>Loading...</Loading>
              : <Content>
                  <div>Content</div>
                </Content>
            }
          </div>
        )
      }
    }

    Ugly? not readable? yes!

    There's no built-in conditional syntax in React. This library adds the syntactic sugar to write conditionals as component. Inspired by jsx control statements

    Install

    npm install --save react-conditioner
    

    Usage

    If

    The body of the if statement only gets evaluated if condition is true.

    import React, { Component } from 'react'
    import { If } from 'react-conditioner'
     
    class YourComponent extends Component {
      render() {
        <If condition={ test }>
          <span>Truth</span>
        </If>
        <If condition={ !test }>
          <span>Second Truth</span>
        </If>
      }
    }

    Choose

    This is an alternative syntax for more complex conditional statements.

    import React, { Component } from 'react'
    import { Choose, When, Otherwise } from 'react-conditioner'
     
    class YourComponent extends Component {
      render() {
        return (
          <div>
            <Choose>
              <When condition={ test1 }>
                <span>IfBlock</span>
              </When>
              <When condition={ test2 }>
                <span>ElseIfBlock</span>
                <span>Another ElseIfBlock</span>
                <span>...</span>
              </When>
              <Otherwise>
                <span>ElseBlock</span>
              </Otherwise>
            </Choose>
          </div>
        );
      }
    }

    Install

    npm i react-conditioner

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • damaera