JunH-K / react-if-render

React Conditional Rendering Component

Beautiful React Conditional Rendering

You can achieve beautiful conditional rendering in React.

Install

npm i react-if-render

Usage

import { Else, If, Then, When, Unless } from "react-if-render";

export default function Example() {
  const isTrue = true;
  const isFalse = false;

  return (
          <div>
            {/* Original Code */}
            <div>
              {isTrue
                      ? "Render when the condition is true."
                      : "Render when the condition is false"}
            </div>

            {/* Code using the react-if-render package */}
            <div>
              <If condition={isTrue}>
                <Then>Render when the condition is true.</Then>
                <Else>Render when the condition is false</Else>
              </If>

              <If condition={isFalse}>
                <Then>Render when the condition is true.</Then>
                <Else>Render when the condition is false</Else>
              </If>
            </div>

            <div>
              <When condition={isTrue}>
                <div>Render when the condition is true.</div>
              </When>
            </div>

            <div>
              <Unless condition={isFalse}>
                <div>Render when the condition is false.</div>
              </Unless>
            </div>
          </div>
  );
}

Online Example

Try Codesandbox

Description

1. <If>

<If condition={true || false}>
  <Then>Render when the condition is true.</Then>
  <Else>Render when the condition is false</Else>
</If>

• <If condition={true}> → The children of <Then> are rendered.
• <If condition={false}> → The children of <Else> are rendered.

2. <When>

<When condition={true}>
  <div>Render when the condition is true.</div>
</When>

• <When condition={true}> → The children of <When> are rendered.

3. <Unless>

<Unless condition={false}>
  <div>Render when the condition is false.</div>
</Unless>

• <Unless condition={false}> → The children of <Unless> are rendered.

release note

• 0.0.1
  • Publish
• 0.0.2
  • Update package dependencies, readme
• 0.0.3
  • Adding the 'When' and 'Unless' Components
• 0.0.4
  • hotfix