conditional-render-simplify v0.1.10

Conditional Render

Render React components conditionally.

What does Simplify component do?

Take a look at the following presentational component, which contains a commonly used pattern for conditional rendering:

const Greeting = ({ isAuthenticated, isAdmin, name }) => (
  <div>
    <Header />
    {isAuthenticated ? (
      isAdmin ? (
        <span className="foo">Welcome back, Admin!</span>
      ) : (
        <span className="foo">Welcome back, {name}!</span>
      )
    ) : (
      <span className="foo">Welcome, Sign Up Now!</span>
    )}
    <Footer />
  </div>
);

With Simplify you can rewrite this into a more readable, reusable and expressive format:

const Greeting = ({ isAuthenticated, isAdmin, name }) => (
  <div>
    <Header />
    <Simplify
      conditions={isAuthenticated ? (isAdmin ? "admin" : "member") : "viewer"}
      admin={<span className="foo">Welcome back, Admin!</span>}
      member={<span className="foo">Welcome back, {name}!</span>}
      viewer={<span className="foo">Welcome, Sign Up Now!</span>}
    />
    <Footer />
  </div>
);

or something like these

const Greeting = ({ isAuthenticated, isAdmin, name }) => (
  <div>
    <Header />
    <Simplify
      conditions={{
        viewer: !isAuthenticated,
        admin: isAdmin,
        member: !isAdmin,
      }}
      admin={welcomeAdmin()}
      member={<span className="foo">Welcome back, {name}!</span>}
      viewer={<SignupNow />}
    />
    <Footer />
  </div>
);

What does If component do?

Take a look at the following presentational component, which contains a commonly used pattern for conditional rendering:

const Bar = ({ name, age, drinkingAge }) => (
  <div>
    <Header />
    {age >= drinkingAge ? (
      <span className="something">Have a beer, {name}!</span>
    ) : (
      <span className="something">Sorry, {name}, you are not old enough.</span>
    )}
    <Footer />
  </div>
);

With If you can rewrite this into a more readable, expressive format:

const Bar = ({ name, age, drinkingAge }) => (
  <div>
    <Header />
    <If condition={age >= drinkingAge} true={<HaveABeer />} false={<Sorry />} />
    <Footer />
  </div>
);

Documents

Simplify Component

If Component

Examples

Simplify

Pass conditions based on requirement,

const Board = ({ wifi, login, admin }) => (
  <div>
    <Header />
    <Simplify
      conditions={
        wifi
          ? login
            ? admin
              ? "adminPanel"
              : "userPanel"
            : "signUp"
          : "connect"
      }
      adminPanel={<Panel admin />}
      userPanel={<Panel user />}
      signUp={<SignUp />}
      connect={<Connect />}
    />
    <Footer />
  </div>
);

const Board = ({ wifi, login, admin }) => (
  <div>
    <Header />
    <Simplify
      conditions={{
        connect: !wifi,
        signUp: !login, // wifi && !login
        userPanel: !admin, // wifi && login && !admin
        adminPanel: admin, // wifi && login && admin
      }}
      adminPanel={<Panel admin />}
      userPanel={<Panel user />}
      signUp={<SignUp />}
      connect={<Connect />}
    />
    <Footer />
  </div>
);

If

Pass condition based on requirement,

const Bar = ({ name, age, drinkingAge }) => (
  <div>
    <Header />
    <If condition={age >= drinkingAge} true={<HaveABeer />} false={<Sorry />} />
    <Footer />
  </div>
);

Version

Latest version,

$ npm install conditional-render-simplify

$ yarn add conditional-render-simplify