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 = { return <Match value=4 render= /> }
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 against -
render
: function - Function that receives one argument,equal
equal
is a function that accepts 2 arguments:-
test
: any - Value to compare against value supplied in props -
render
: 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
.
{ return 'a' 'b' 'c'} const App = { return <Match value=getValue render= /> }