# choose-matching

> First element matching a boolean condition

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

## Install

```sh
npm install choose-matching
pnpm add choose-matching
yarn add choose-matching
bun add choose-matching
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-10-19 |
| First published | 2023-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | zapolnoch |
| Keywords | pattern, matching, switch |

## Links

- npm: https://www.npmjs.com/package/choose-matching
- Repository: https://github.com/zapolnoch/choose
- Homepage: https://github.com/zapolnoch/choose#readme
- Issues: https://github.com/zapolnoch/choose/issues
- npm.io page: https://npm.io/package/choose-matching

## Recent versions

- 1.0.0 (latest) — 2023-10-19

## README

First element matching a boolean condition:

```ts
const Component = () => (
  <section>
    <header></header>
    <nav>
      {choose(
        [test === "blue", <BlueButton />],
        [test === "green", <GreenButton />],
        [true, <Button />],
      )}
    </nav>
  </section>
)
```

## Why?

Because `if` statement is a statement, but here we expect an expression.

## Alternatives

### Self-invoking function

```jsx
<div>
  {(() => {
    switch (test) {
      case "blue":
        return <BlueButton />
      case "green":
        return <GreenButton />
      default:
        return <Button />
    }
  })()}
</div>
```

### Pattern matching

Based on [TC39 proposal](https://github.com/tc39/proposal-pattern-matching) or [ts-pattern](https://github.com/gvergnaud/ts-pattern):

```js
match (test) {
  when ("blue"): <BlueButton />
  when ("green"): <GreenButton />
  default: <Button />
}
```

### Modern way

Use languages in which `if` and `switch` are expressions, e.g. [Civet](https://github.com/DanielXMoore/Civet).

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