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:

``jsx
const Greeting = ({ isAuthenticated, isAdmin, name }) => (

conditions={isAuthenticated ? (isAdmin ? "admin" : "member") : "viewer"}
admin={Welcome back, Admin!}
member={Welcome back, {name}!}
viewer={Welcome, Sign Up Now!}
/>

);
`

or something like these

`jsx
const Greeting = ({ isAuthenticated, isAdmin, name }) => (

conditions={{
viewer: !isAuthenticated,
admin: isAdmin,
member: !isAdmin,
}}
admin={welcomeAdmin()}
member={Welcome back, {name}!}
viewer={}
/>

);
`






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.

`jsx
const App = () => (

breakpoints={{
bigDesktop: 1440,
desktop: 1024,
tablet: 768,
}}
bigDesktop={

Big Desktop View

}
desktop={

Desktop View

}
tablet={

Tablet View

}
defaultLayout={

Mobile View

}
/>

);
`






What does Mapping component do?



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

`jsx
const App = () => (

data={listData} // [1, 2, 3]
renderItem={(item, index) => }
isLoading={isDataLoading}
fallbackEmpty={

{"No Data Available"}

}
fallbackLoading={

{"Loading..."}

}
/>

);
`






What does If component do?



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

`jsx
const Bar = ({ name, age, drinkingAge }) => (

{age >= drinkingAge ? (
Have a beer, {name}!
) : (
Sorry, {name}, you are not old enough.
)}

);
`

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

`jsx
const Bar = ({ name, age, drinkingAge }) => (

= drinkingAge} true={} false={} />

);
`

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,

`jsx
const Board = ({ wifi, login, admin }) => (

conditions={
wifi
? login
? admin
? "adminPanel"
: "userPanel"
: "signUp"
: "connect"
}
adminPanel={}
userPanel={}
signUp={}
connect={}
/>

);
`

`jsx
const Board = ({ wifi, login, admin }) => (

conditions={{
connect: !wifi,
signUp: !login, // wifi && !login
userPanel: !admin, // wifi && login && !admin
adminPanel: admin, // wifi && login && admin
}}
adminPanel={}
userPanel={}
signUp={}
connect={}
/>

);
`

If

Pass condition based on requirement,

`jsx
const Bar = ({ name, age, drinkingAge }) => (

= drinkingAge} true={} false={} />

);
`

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