react-render-iff

Install

npm install --save react-render-iff

Usage

Import as "RenderIf" and use as illustrated in the examples below. There are many more powerful usages that may not be illustrated, so take a look at the source code to see what more you can do.

import React, { Component } from "react";

import RenderIf from "react-render-iff";

class Example extends Component {
  render() {
    const isTrue = 1 == 1;
    const isFalse = 1 == 2;

    const ExampleComp = props => {
      return <div {...props}>My wrapper comp stuff: {props.children}</div>;
    };

    return (
      <div>
        <h1>Example uses</h1>

        <div>
          <h2>Example 1:</h2>
          <p>
            Provide render conditions and render props.
            <br />
            <br />
            The "if" will succeed and render its render prop, "elseIfRender" as a
            plain Text node.
          </p>
          <RenderIf
            if={isTrue}
            render={"Hello, world. The expression evaluated to true 😎"}
            elseIf={() => 1 === 1}
            elseIfRender={() => "This will do!"}
            else={"Bye, world. Both expressions evaluated to false 😥"}
          />

          <div>
            <h3>🌴 The output of this example should be:</h3>
            Hello, world. The expression evaluated to true 😎
          </div>
        </div>

        <div>
          <h2>Example 2:</h2>
          <p>
            Render consitions and render props with a child node for the "if"
            condition.
            <br />
            <br />
            The "if" will succeed and render the child node.
          </p>
          <RenderIf
            if={() => isTrue}
            elseIf={() => 1 === 1}
            elseIfRender={() => "This will do!"}
            else={() => (
              <p>Bye, world. Both expressions evaluated to false 😥</p>
            )}
          >
            Hello, world. The expression evaluated to true 😎
          </RenderIf>

          <div>
            <h3>🌴 The output of this example should be:</h3>
            Hello, world. The expression evaluated to true 😎
          </div>
        </div>

        <div>
          <h2>Example 3:</h2>
          <p>
            The "elseIf" will succeed and render its "elseIfRender" prop, which
            happens to be an arrow function that will be evaluated.
          </p>
          <RenderIf
            if={() => isFalse}
            elseIf={() => 1 === 1}
            elseIfRender={() => "This will do!"}
            else={() => (
              <p>Bye, world. Both expressions evaluated to false 😥</p>
            )}
          >
            Hello, world. The expression evaluated to true 😎
          </RenderIf>

          <div>
            <h3>🌴 The output of this example should be:</h3>
            This will do!
          </div>
        </div>

        <div>
          <h2>Example 4:</h2>
          <p>
            You can use an arrow function to evaluate conditionals as well as
            for rendering.
            <br />
            <br />
            The "if" will succeed.
          </p>
          <RenderIf
            if={() => isTrue}
            elseIf={() => 1 === 1}
            elseIfRender={() => "This will do!"}
            else={() => (
              <p>Bye, world. Both expressions evaluated to false 😥</p>
            )}
          >
            <p>Hello, world.</p>
            <p>The expression evaluated to true 😎</p>
          </RenderIf>

          <div>
            <h3>🌴 The output of this example should be:</h3>

            <p>Hello, world.</p>
            <p>The expression evaluated to true 😎</p>
          </div>
        </div>

        <div>
          <h2>Example 5:</h2>
          <p>
            ✨ You can provide an "as" prop to render a parent element with the
            properties you provide.
            <br />
            <br />
            The "as" prop supports all HTML elements and any react components you
            provide to it. If you choose to provide a react component, your component
            must render the "props.children" that will be provided to it.
            <br />
            <br />
            The "elseIf" will succeed. "<RenderIf />" will be rendered as a "
            <section />" node with the provided classes and style, as well as any
            other allowed properties; the properties specific to "
            <RenderIf />" will be ignored when rendering.
          </p>

          <RenderIf
            as="section"
            className="u-textColorRed u-marginBottom10"
            style={{ background: "blue" }}
            title="Some cool stuff!"
            if={() => isFalse}
            elseIf={isTrue}
            elseIfRender={<p>This will do!</p>}
            else={() => (
              <p>Bye, world. Both expressions evaluated to false 😥</p>
            )}
          >
            <p>Hello, world.</p>
            <p>The expression evaluated to true 😎</p>
          </RenderIf>

          <div>
            <h3>🌴 The output of this example should be:</h3>

            <section
              class="u-textColorRed u-marginBottom10"
              style="background: blue;"
              title="Some cool stuff!"
            >
              <p>This will do!</p>
            </section>
          </div>
        </div>

        <div>
          <h2>Example 6:</h2>
          <p>
            Here, we provide a react component to the "as" prop. If you choose
            to provide a react component, your component must render the
            "props.children" that will be provided to it.
            <br />
            <br />
            The "else" will succeed. "<RenderIf />" will be rendered as a "
            <ExampleComp />" node with the provided classes and style, as well
            as any other allowed properties; the properties specific to "
            <RenderIf />" will be ignored when rendering.
          </p>

          <RenderIf
            as={ExampleComp}
            className="u-textColorRed u-marginBottom10"
            style={{ background: "blue" }}
            title="Some cool stuff!"
            if={() => isFalse}
            elseIf={isFalse}
            elseIfRender={<p>This will do!</p>}
            else={() => (
              <p>Bye, world. Both expressions evaluated to false 😥</p>
            )}
          >
            <p>Hello, world.</p>
            <p>The expression evaluated to true 😎</p>
          </RenderIf>

          <div>
            <h3>🌴 The output of this example should be:</h3>

            <div
              class="u-textColorRed u-marginBottom10"
              style="background: blue;"
              title="Some cool stuff!"
            >
              My wrapper comp stuff:
              <p>Bye, world. Both expressions evaluated to false 😥</p>
            </div>
          </div>
        </div>

        <div>
          <h2>Example 7:</h2>
          <p>
            ⚠️ You can specify whether to evaluate all conditions and render
            props safely by providing a truthy value to the "safeEval" prop.
            <br />
            <br />
            If an error occurs while evaluating the conditions, a warning will be
            printed to the console with the value of "safeEval" as the key for debugging.
            This only works when the conditionals and render props are provided as
            arrow functions, so keep that in mind.
            <br />
            <br />
            This can come in handy when rewriting your AngularJs app in React
            because AngularJs evaluates its "ng-if" and "ng-show" directives
            safely, which you would be accustomed to and thrown off by the lack
            their of when transitioning to React.
            <br />
            <br />
            The "if" condition's function throws an error for some reason, so it
            evaluates to false and we move on to the next condition. The "elseIf"
            condition evaluates to true.
          </p>
          <RenderIf
            as="header"
            if={() => {
              throw new Error(
                "Oh no! An error occurred while evaluating the if condition!"
              );
            }}
            elseIf={() => isTrue}
            elseIfRender={<p>This will do!</p>}
            else={() => (
              <p>Bye, world. Both expressions evaluated to false 😥</p>
            )}
            safeEval={"my-safe-eval-debug-key"}
          >
            <p>Hello, world.</p>
            <p>The expression evaluated to true 😎</p>
          </RenderIf>

          <div>
            <h3>🌴 The output of this example should be:</h3>

            <header>
              <p>This will do!</p>
            </header>
          </div>
        </div>
      </div>
    );
  }
}

License

By Lincoln W Daniel

MIT © Lwdthe1