# react-pattern-matching

> Generic Pattern and Match components to help with all your conditional rendering needs.

Latest version **0.0.4** (published 2018-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-pattern-matching
pnpm add react-pattern-matching
yarn add react-pattern-matching
bun add react-pattern-matching
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2018-05-12 |
| First published | 2018-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 87.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 14 |
| Maintainers | joshblack |
| Keywords | react, conditional, rendering, components, pattern, matching |

## Links

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

## Dependencies (2)

- [lodash.pick](https://npm.io/package/lodash.pick.md) ^4.4.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.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.0.4 (latest) — 2018-05-12
- 0.0.3 — 2018-05-12
- 0.0.2 — 2018-05-04
- 0.0.1 — 2018-05-04

## README

# `react-pattern-matching`

[![Build Status](https://travis-ci.org/joshblack/react-pattern-matching.svg?branch=master)](https://travis-ci.org/joshblack/react-pattern-matching)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

> `Pattern` and `Match` components, with generic matching tools, to
> assist you in all your conditional rendering needs.

## Install

Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install react-pattern-matching --save
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add react-pattern-matching
```

## Usage

The main component exported by `react-pattern-matching` is the `<Pattern>` component.
`Pattern` takes in a couple props, namely:

* `match` which is an object that contains a mapping of the props and their
  values that you want to match against.
* `first`: by default, `Pattern` will render _every_ child that matches the
  `match` criteria with the given matcher. If you don't want this behavior,
  setting the `first` prop to true will make `Pattern` render only the first match.
* `isMatch` an optional prop that allows you to implement your own matching
  logic, or use one of the strategies exported in `matchers`.

We can use `Pattern` in the following way:

```js
import { Pattern, Match } from 'react-pattern-matching';
const App = () => (
  <Pattern match={{ foo: 'bar' }}>
    <Match foo="bar">Bar</Match>
    <Match foo="baz">Baz</Match>
  </Pattern>
);
```

In this example, it would only render the first `Match` with `foo="bar"`. This
matches the object given to the `match` prop for `Pattern`, where the name of the
prop, `foo`, matches the value of the prop, `'bar'`.

`Pattern` also can be used to render all matches of the `match` prop, or just the
first match. This is what the `first` prop is used for. For example:

```js
import { Pattern, Match } from 'react-pattern-matching';

// In this case, `Pattern` renders both `Bar 1` and `Bar 2`
const AllMatches = () => (
  <Pattern match={{ foo: 'bar' }}>
    <Match foo="bar">Bar 1</Match>
    <Match foo="bar">Bar 2</Match>
  </Pattern>
);

// In this case, `Pattern` renders only `Bar 1` because of the `first` prop
const FirstMatch = () => (
  <Pattern match={{ foo: 'bar' }} first>
    <Match foo="bar">Bar 1</Match>
    <Match foo="bar">Bar 2</Match>
  </Pattern>
);
```

### Inspiration

* https://www.youtube.com/watch?v=MkdV2-U16tc

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