conditional-render-simplify v0.1.13

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

Responsive Component

Mapping 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

🚀 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