conditional-render-simplify

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

The Mapping component renders a list of items with support for fallback states.

const App = () => (
  <div>
    <Mapping
      data={listData} // [1, 2, 3]
      renderItem={(item, index) => <Item key={index} item={item} />}
      isLoading={isDataLoading}
      fallbackEmpty={<p>{"No Data Available"}</p>}
      fallbackLoading={<p>{"Loading..."}</p>}
    />
  </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

Mapping Component

Props	Default	Detail
data		Array of items to be mapped
renderItem	undefined	Function to render each item in the data array
isLoading	false	Flag to indicate if loading is in progress
fallbackEmpty	null	Element to render when data is empty
fallbackLoading	null	Element to render during loading state

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

🚀 Hire Me

Looking for a skilled developer to bring your ideas to life? I specialize in building efficient and scalable solutions.

📫 Contact Me:

• Email
• Portfolio
• GitHub
• LinkedIn