Maybe render a React component, maybe not 😮
// 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 (Maybe 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
.
<Mayre of=MyComponent when=propssomething > 10 with= some: 'thing' />
Note that of
can be a component instance or declaration. And when can be boolean
or a function.
<Mayre of=<p>Something</p> when= />
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.
<Mayre of=<p>Either this</p> or=<p>Or this one</p> 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
.
<Mayre of=<p>Either this</p> or=<p>Or this one</p> 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.
<Mayre of=MyComponent when=propssomething > 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:
// no more dumb render methods pollutionconst renderSomething = { if !canRender return null return <Something ...propsFromParent />} const Parent = <div> </div>