# react-switch-casu

> Conditional rendering in React works the same way conditions work in JavaScript. Stop using JavaScript operators like if or ternary conditional operators to create elements that represent the current state and let `react-switch-casu` take care of updating

Latest version **1.0.0** (published 2023-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-switch-casu
pnpm add react-switch-casu
yarn add react-switch-casu
bun add react-switch-casu
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-10-10 |
| First published | 2023-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 14 |
| Dependencies | 0 |
| Unpacked size | 49.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Dominyel Rivera - Yoydev |
| Maintainers | yoydev |
| Keywords | react, expression, switch-case, react-switch-casu, Conditional Rendering, conditional-rendering |

## Links

- npm: https://www.npmjs.com/package/react-switch-casu
- Repository: https://github.com/lac617a/react-switch-casu
- Homepage: https://react-switch-casu.netlify.com
- Issues: https://github.com/lac617a/react-switch-casu/issues
- npm.io page: https://npm.io/package/react-switch-casu

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

- 1.0.0 (latest) — 2023-10-10
- 0.1.1 — 2023-10-07
- 0.1.0 — 2023-10-07

## README

# Simplify conditional rendering in react

[![Version][version-badge]][npm]
[![Downloads][downloads-badge]][npm]
[![GitHub stars](https://img.shields.io/github/stars/lac617a/react-switch-casu.svg?style=social&label=Stars)](https://github.com/lac617a/react-switch-casu)
[![gzip size](http://img.badgesize.io/https://unpkg.com/react-switch-casu/dist/react-switch-casu.min.js?compression=gzip)](https://unpkg.com/react-switch-casu/dist/react-switch-casu.min.js)

[![MIT License][license-badge]](LICENSE.md)

## Demo

[Take a look at the demo][demon]

## Installing

### Package manager

```bash
$ npm install react-switch-casu
```

Using yarn:

```bash
$ yarn add react-switch-casu
```

Using pnpm:

```bash
$ pnpm add react-switch-casu
```

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

```jsx
import React from "react";
import Switch from "react-switch-casu";

function SwitchCaseSimpleExample() {
  const [show, setShow] = useState(false)
  return (
    <Switch>
      <Switch.Case condition={show}>
        {/* here your login component  */}
      </Switch.Case>
      <Switch.Case condition={!show}>
        {/* here your register component  */}
      </Switch.Case>
      <Switch.Default>
        <h1>Welcome to Home</h1>
      </Switch.Default>
    </Switch>
  );
}
```

### This is the basic syntax for a `Switch` statement with the `expression` condition

```jsx
import React from "react";
import Switch from "react-switch-casu";

function SwitchCaseExpressionExample() {
  const [expression, setExpression] = useState(3)
  return (
    <Switch expression={expression}>
      <Switch.Case condition={1}>
        {/* here your login component  */}
      </Switch.Case>
      <Switch.Case condition={2}>
        {/* here your register component  */}
      </Switch.Case>
      <Switch.Default>
        <h1>Welcome to Home</h1>
      </Switch.Default>
    </Switch>
  );
}
```

The computer will review the `Switch` statement and check for equality
strict === between the case `Case` and the expression `expression`.

If one of the cases matches the expression `expression`,
will execute the code inside the `Case` case clause.

If multiple cases match the `Switch` statement, the
first case `Case` that matches the expression `expression`.

If none of the cases match the expression, the clause will be executed
default `Default`.

With the `Switch` statements they can have a cleaner syntax than the
complicated `ternary` or `if else` statements, which are sometimes a
little cumbersome to understand.

### `Switch` fallthrough example

```jsx
import React from "react";
import Switch from "react-switch-casu";

function SwitchCaseExpressionExample() {
  const [weekDayNo, setWeekDayNo] = useState(3)
  return (
    <Switch expression={weekDayNo} fallthrough>
      <Switch.Case condition={1}>Monday</Switch.Case>
      <Switch.Case condition={2}>Tuesday</Switch.Case>
      <Switch.Case condition={3}>Wednesday</Switch.Case>
      <Switch.Case condition={4}>Thursday</Switch.Case>
      <Switch.Case condition={5}>Friday</Switch.Case>
      <Switch.Case condition={6}>Saturday</Switch.Case>
      <Switch.Case condition={7} break>Sunday</Switch.Case>
      <Switch.Default>
        week day number must be between 1 and 7
      </Switch.Default>
    </Switch>
  );
}
```

### The current syntax for something like this could look like this

```javascript
return (
  <div>
    {(() => {
      switch (condition) {
        case maybeMatchesCondition:
          return <h1>I match</h1>;
        case alsoMaybeMatchesCondition:
          return <h1>No, I match</h1>;
        default:
          return <h1>Oh no, nothing matched!</h1>;
      }
    })()}
  </div>
)
```

[MIT License](LICENSE.md)

[demon]: https://react-switch-casu.netlify.com
[downloads-badge]: https://flat.badgen.net/npm/dw/react-switch-casu
[version-badge]: https://flat.badgen.net/npm/v/react-switch-casu
[license-badge]: https://flat.badgen.net/badge/license/MIT/blue
[npm]: https://npmjs.com/package/react-switch-casu

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