react-pattern-match
v3.0.1
Published
Declaritive component for deciding what to render
Downloads
22
Maintainers
Readme
react-pattern-match
npm install -S react-pattern-match
Is this really pattern matching? No, but it is fun to pretend.
For React 16 and above only
Basic
const App = (props) => {
return (
<Match
value={4}
render={eq => [
eq(4, () => <Box name="I will render" />),
eq(5, () => <Box name="I will not render" />),
eq(() => 4, () => <Box name="I will render, fn value is equal" />)
]}
/>
)
}
Match
Match
uses lodash.isEqual
to compare a given value vs one provided in the render callback.
From the lodash docs
Performs a deep comparison between two values to determine if they are equivalent. Note: This method supports comparing arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, > > and typed arrays. Object objects are compared by their own, not inherited, enumerable properties. Functions and DOM nodes are compared by strict equality, i.e. ===.
props
value
: any - Base value to compare againstrender
: function - Function that receives one argument,equal
equal
is a function that accepts 2 arguments:test
: any - Value to compare against value supplied in propsrender
: function - Function that returns children. Called only iflodash.isEqual(value, test)
Function as Value
If the value
prop or test
value are functions they will be called before being passed to lodash.isEqual
.
function getValue () {
return ['a', 'b', 'c']
}
const App = (props) => {
return (
<Match
value={getValue}
render={eq => [
eq(['a', 'b', 'c'], () => <Box name="should match array" />),
eq(['a', 'b', 'c', 'd'], () =>
<Box name="should not match array" />
),
eq(() => ['a', 'b', 'c'], () => <Box name="should match fn" />),
eq(
() => ['a', 'b', 'c', 'd'],
() => <Box name="should not match fn" />
)
]}
/>
)
}