# react-if-else-switch

> simplify conditional rendering.

Latest version **0.1.3** (published 2021-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-if-else-switch
pnpm add react-if-else-switch
yarn add react-if-else-switch
bun add react-if-else-switch
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-12-28 |
| First published | 2021-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | rajesh jangid |
| Maintainers | rajeshjangid |
| Keywords | react, if, else, switch case, react conditionals, react conditional rendering, react if, react switch, react switch case, react if else switch, react else if |

## Links

- npm: https://www.npmjs.com/package/react-if-else-switch
- Repository: https://github.com/RajeshJangid911/react_if_else_switch
- Homepage: https://github.com/RajeshJangid911/react_if_else_switch#readme
- Issues: https://github.com/RajeshJangid911/react_if_else_switch/issues
- npm.io page: https://npm.io/package/react-if-else-switch

## Dependencies (4)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2021-12-28
- 0.1.2 — 2021-12-13
- 0.1.1 — 2021-12-11
- 0.1.0 — 2021-12-11

## README

# 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.

## 1. `If`, `Then`, `Else`

### Example

#### 1. Before

```jsx
{
    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

```jsx
    <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

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.

---

### Components

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`

### Example

```jsx
<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

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.

### Components

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.

### `Switch` fallthrough example

```jsx
<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>
```

---
_Source: https://npm.io/package/react-if-else-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._