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 ultra light (533 bytes)
component to tackle this issue from the jsx
side.
Compatible with React, React-Native and ReactVR.
There are three props you can use: of
, when
and with
.
<Mayre
of={MyComponent}
when={props.something > 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={() => checkWhatever()}
/>
Name | Required | Default | Type | Comment |
---|---|---|---|---|
of | Yes | - | func , element |
The React component to be rendered |
when | No | false |
bool , func |
The render condition |
with | No | {} |
object |
Props to be passed to of component |
Stop doing this. No more.
// no more dumb render methods pollution
const renderSomething = (canRender, propsFromParent) => {
if (!canRender) return null
return <Something {...propsFromParent} />
}
const Parent = (props) => (
<div>
{renderSomething(props.a === props.b, props)}
</div>
)