Nuclear Pumpkin Mocha

    render-ifelse

    0.0.1 • Public • Published

    render-ifelse

    License NPM version

    An extension to render-if

    A tiny, yet conveniently curried way to render conditional React components. Works great with both React and React Native.

    renderIfElse(predicate)(elementOnTrue[,elementOnFalse])

    What it looks like

    renderIfElse is a curried function that takes a predicate and returns a function accepting two elements, first of them will only be returned if the predicate is satisfied, else second is returned. The function returned by renderIfElse will also accept parameterless functions which will be invoked similarly, if the predicate is satisfied, first argument is invoked, else second is invoked, allowing for lazy evaluation of inner JSX.

    renderIfElse(1 + 1 === 2)(
      <Text>Hello World!</Text>, <Text>Hello, Non-Decimal World!</Text>
    )

    As an in-line expression

    class MyComponent extends Component {
      render() {
        return (
          {renderIfElse(1 + 2 === 3)(
            <span>The universe is working</span>,<span>The universe is broken</span>
          )}
        );
      }
    }

    As a lazy in-line expression

    class MyComponent extends Component {
      render() {
        return (
          {renderIfElse(1 + 2 === 3)(
              () => (
                <span>This is only invoked if the universe is working</span>
              ),
              () => (
                <span>This is only invoked if the universe is broken</span>
              )
          )}
        );
      }
    }

    As a named function

    class MyComponent extends Component {
      render() {
        const isTheUniverseIsWorking = renderIfElse(1 + 2 === 3);
        return (
          {isTheUniverseIsWorking(
            <span>The universe is still wroking</span>,
            <span>The universe is not wroking</span>
          )}
        )
      }
    }

    As a composed function

    const isEven = number => renderIfElse(number % 2 === 0);
     
    class MyComponent extends Component {
      render() {
        return (
          {isEven(this.props.count)(
            <span>{this.props.count} is even</span>,
            <span>{this.props.count} is odd</span>
          )}
        );
      }
    }

    What it no longer looks like

    class MyComponent extends Component {
      render() {
        var conditionalOutput;
        if (1 + 1 === 2) {
          conditionalOutput = <span>I am rendered!</span>;
        } else {
          conditionalOutput = <span>I am not rendered :(</span>;
        }
        return (
          <div>
            <!-- this works, but it can get ugly -->
            {conditionalOutput}
            {1 + 1 === 2 && <span>I am rendered!</span>}
            {this.anotherConditionalRender()}
          </div>
        );
      }
      anotherConditionalRender() {
        if (1 + 1 === 2) {
          return <span>I am rendered!</span>
        }
      }
    }

    Install

    npm i render-ifelse

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • sundeepnarang