Components to help you out with all your conditional rendering needs
react-pattern-matching
Pattern
andMatch
components, with generic matching tools, to assist you in all your conditional rendering needs.
Run the following command using npm:
npm install react-pattern-matching --save
If you prefer Yarn, use the following command instead:
yarn add react-pattern-matching
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 theirfirst
: by default, Pattern
will render every child that matches thematch
criteria with the given matcher. If you don't want this behavior,first
prop to true will make Pattern
render only the first match.isMatch
an optional prop that allows you to implement your own matchingmatchers
.We can use Pattern
in the following way:
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:
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>
);