react-if-else-switch

Simplify conditional rendering in react.

$3

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.

1. If, Then, Else

$3

#### 1. Before

``jsx
{
age >= 18 ? inVotingList ? You can vote. :
You can't vote. Your name is not in voting list. : You are too young to vote.
}
`

#### 2. After

`jsx
= 18}>



You can vote.


You can't vote. Your name is not in voting list.




You are too young to vote.


`

---

$3

1. Install via npm or yarn:

`
$ npm install react-if-else-switch
`

`
$ yarn add react-if-else-switch
`

2. Import in your component:

`jsx
import {If, Then, Else} from 'react-if-else-switch';
`

3. Use it like shown in the above example.

---

$3

1. If
* Wrapper component for Then and Else.
* It takes a condition as a prop.
* Anything other outside of Then and Else 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.
2. Then
* Must be used inside If.
* Must contain children/child.
3. Else
* Must be used inside If.
* Must contain children/child.

---

#### Extra Notes

* You can use multiple Then or Else in a single If, in case if you need.
* You can nest them as per your need, as shown in the above example.



2. Switch, Case, Default

$3

`jsx


You are 18.


You are 21.


You are not 18 or 21.


`

$3

1. Install via npm or yarn:

2. Import in your component:

`jsx
import {Switch, Case, Default} from 'react-if-else-switch';
`

3. Use it like shown in the above example.

$3

1. Switch
* Wrapper component for Case and Default.
* It takes an expression as a prop.
* It also takes two optional boolean props fallthrough and enableMemo.
* 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 the Case component wherever you want to
stop fallthrough.
* Anything else outside of Case and Default will be ignored.
2. 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 in Switch.
3. Default
* Must be used inside Switch.
* Must contain children/child.

$3

`jsx


Monday


Tuesday


Wednesday


Thursday


Friday


Saturday


Sunday


week day number must be between 1 and 7


``