https://github.com/sospedra/mayre
Maybe render a React component, maybe not 😮
https://github.com/sospedra/mayre
component conditional maybe monad react
Last synced: about 9 hours ago
JSON representation
Maybe render a React component, maybe not 😮
- Host: GitHub
- URL: https://github.com/sospedra/mayre
- Owner: sospedra
- License: mit
- Created: 2017-05-18T17:36:06.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-02-13T07:10:55.000Z (over 1 year ago)
- Last Synced: 2026-07-13T02:53:36.812Z (about 9 hours ago)
- Topics: component, conditional, maybe, monad, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/mayre
- Size: 674 KB
- Stars: 117
- Watchers: 1
- Forks: 8
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 
Maybe render a React component, maybe not 😮
[](https://travis-ci.org/sospedra/mayre)
[](https://david-dm.org/sospedra/mayre)
[](https://codeclimate.com/github/sospedra/mayre)
[](https://standardjs.com)
```
// Get it!
yarn add mayre
npm install --save mayre
```
While working with React you'll find yourself making conditionals
components quite a lot of times. And they're always the same: a component which
upon a set of conditions may render or just return null (or short-circuit it).
Here comes Mayre (May**b**e render)! A very simple and super light (2kb)
component to tackle this issue from the `jsx` side.
Compatible with *React*, *React-Native* and *ReactVR*.
### Usage
#### Maybe
There are three props you can use: `of`, `when` and `with`.
```js
10}
with={{ some: 'thing' }}
/>
```
Note that `of` can be a component instance or declaration. And when can be boolean
or a function.
```js
Something}
when={() => checkWhatever()}
/>
```
#### Either
But not only this! Conditional rendering isn't only about mount this component
or not. We can also use Mayre to render either this element or the other.
```js
Either this}
or={
Or this one
}
when={whateverCondition}
/>
```
If a `with` prop is provided it'll be applied to both of them. If you want to specify special props for each of them use `orWith`.
```js
Either this}
or={
Or this one
}
when={whateverCondition}
with={{ appliedTo: 'of' }}
orWith={{ appliedTo: 'this will used by or element' }}
/>
```
#### Auto props picking
Most of the times the component rendered by Mayre is a subset of a bigger one.
Hence, it's using a selection of the parent props. That's why Mayre has a special
syntax to pick the props you need to while passing them down.
```js
10}
with={[props, 'thisProps', 'andThisOther']}
/>
```
Same can be applied for `orWith` attribute.
### Props
| Name | Required | Default | Type |Comment |
|--------|----------|---------|-------------------|----------------------------------------|
| of | Yes | - | `func`, `element` | The React component to be rendered |
| or | No | `null` | `func`, `element` | The React component rendered instead of `of` |
| when | No | `false` | `bool`, `func` | The render condition |
| with | No | `{}` | `object`, `array` | Props to be passed to `of/or` component |
| orWith | No | `{}` | `object`, `array` | Props to be passed to `or` component |
### Benefit
Stop doing this:
```js
// no more dumb render methods pollution
const renderSomething = (canRender, propsFromParent) => {
if (!canRender) return null
return
}
const Parent = (props) => (
{renderSomething(props.a === props.b, props)}
)
```