https://github.com/tkh44/react-pattern-match
Render based on assertions
https://github.com/tkh44/react-pattern-match
match pattern-matching react react-component
Last synced: about 1 year ago
JSON representation
Render based on assertions
- Host: GitHub
- URL: https://github.com/tkh44/react-pattern-match
- Owner: tkh44
- Created: 2017-02-02T20:31:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-26T17:36:39.000Z (over 8 years ago)
- Last Synced: 2025-04-10T22:18:04.505Z (about 1 year ago)
- Topics: match, pattern-matching, react, react-component
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# react-pattern-match
[](https://badge.fury.io/js/react-pattern-match)
[](https://travis-ci.org/tkh44/react-pattern-match)
[](https://codecov.io/gh/tkh44/react-pattern-match)
```bash
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
```javascript
const App = (props) => {
return (
[
eq(4, () => ),
eq(5, () => ),
eq(() => 4, () => )
]}
/>
)
}
```
## Match
`Match` uses [`lodash.isEqual`](https://lodash.com/docs/#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 if `lodash.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`.
```javascript
function getValue () {
return ['a', 'b', 'c']
}
const App = (props) => {
return (
[
eq(['a', 'b', 'c'], () => ),
eq(['a', 'b', 'c', 'd'], () =>
),
eq(() => ['a', 'b', 'c'], () => ),
eq(
() => ['a', 'b', 'c', 'd'],
() =>
)
]}
/>
)
}
```