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:

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 Responsive component do?

The Responsive component dynamically renders elements based on screen breakpoints. It is designed to help you implement responsive designs based on mobile-first approach.

const App = () => (
  <div>
    <Responsive
      breakpoints={{
        bigDesktop: 1440,
        desktop: 1024,
        tablet: 768,
      }}
      bigDesktop={<div>Big Desktop View</div>}
      desktop={<div>Desktop View</div>}
      tablet={<div>Tablet View</div>}
      defaultLayout={<div>Mobile View</div>}
    />
  </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

| Props | Default | Detail | | ---------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | conditions | undefined | conditions can be string or object, 1. If conditions string is passed, then prop with that name will be rendered. 2. If conditions object is passed, then first key with value true will be rendered, otherwise will return null. | | multiple | false | If conditions are in object and multiple is true then all key with value true will be rendered, otherwise first key with value true will be rendered. |

Responsive Component

| Props | Default | Detail | | ------------- | --------- | -------------------------------------------------------------- | | breakpoints | undefined | Object defining breakpoints | | defaultLayout | null | A fallback layout to render, this can be a mobile-first layout |

If Component

| Props | Default | Detail | | --------- | ------- | --------------------------------------------------------------------- | | condition | false | condition will be checked | | true | null | When condition is true, will render true element passed with If | | false | null | When condition is false, will render false element passed with If |

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