react-if-else-switch
Simplify conditional rendering in react.
What is it, and what it does?
It is a simple package that provides multiple utility components for simplifying conditional rendering in react. By using this package you can make your code more readable and maintainable as shown below.
If
, Then
, Else
1. Example
1. Before
{
age >= 18 ? inVotingList ? <span>You can vote.</span> :
<span>You can't vote. Your name is not in voting list.</span> : <span>You are too young to vote.</span>
}
2. After
<If condition={age >= 18}>
<Then>
<If condition={inVotingList}>
<Then>
<span>You can vote.</span>
</Then>
<Else>
<span>You can't vote. Your name is not in voting list.</span>
</Else>
</If>
</Then>
<Else>
<span>You are too young to vote.</span>
</Else>
</If>
Getting Started
- Install via npm or yarn:
$ npm install react-if-else-switch
$ yarn add react-if-else-switch
- Import in your component:
import {If, Then, Else} from 'react-if-else-switch';
- Use it like shown in the above example.
Components
-
If
- Wrapper component for
Then
andElse
. - It takes a condition as a prop.
- Anything other outside of
Then
andElse
will be ignored. - If condition is truthy, then the children of
Then
will be rendered. - If condition is falsy, then the children of
Else
will be rendered.
- Wrapper component for
-
Then
- Must be used inside
If
. - Must contain children/child.
- Must be used inside
-
Else
- Must be used inside
If
. - Must contain children/child.
- Must be used inside
Extra Notes
- You can use multiple
Then
orElse
in a singleIf
, in case if you need. - You can nest them as per your need, as shown in the above example.
Switch
, Case
, Default
2. Example
<Switch expression={age}>
<Case value={18}>
<span>You are 18.</span>
</Case>
<Case value={21}>
<span>You are 21.</span>
</Case>
<Default>
<span>You are not 18 or 21.</span>
</Default>
</Switch>
Getting Started
-
Install via npm or yarn:
-
Import in your component:
import {Switch, Case, Default} from 'react-if-else-switch';
- Use it like shown in the above example.
Components
-
Switch
- Wrapper component for
Case
andDefault
. - It takes an expression as a prop.
- It also takes two optional boolean props
fallthrough
andenableMemo
. - By default both 'fallthrough' and 'enableMemo' are false.
- After enabling memo feature, it will only re-render if the expression changes.
- After enabling fallthrough you will need to pass a boolean
break
in theCase
component wherever you want to stop fallthrough. - Anything else outside of
Case
andDefault
will be ignored.
- Wrapper component for
-
Case
- Must be used inside
Switch
. - It takes a value as a prop.
- Must contain children/child.
- Optional boolean prop
break
if fallthrough is enabled inSwitch
.
- Must be used inside
Default
- Must be used inside
Switch
. - Must contain children/child.
Switch
fallthrough example
<Switch expression={weekDayNo} fallthrough>
<Case value={1}>
Monday
</Case>
<Case value={2}>
Tuesday
</Case>
<Case value={3}>
Wednesday
</Case>
<Case value={4}>
Thursday
</Case>
<Case value={5}>
Friday
</Case>
<Case value={6}>
Saturday
</Case>
<Case value={7} break>
Sunday
</Case>
<Default>
week day number must be between 1 and 7
</Default>
</Switch>