react-render-iff

    2.0.0 • Public • Published

    react-render-iff

    carbon (34)

    NPM JavaScript Style Guide

    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

    Install

    npm i react-render-iff

    DownloadsWeekly Downloads

    41

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    45.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • lwdthe1