jonaswindey / mayre

Maybe render a React component, maybe not 😮

Mayre

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.

Usage

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()}
/>

Props

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

Benefit

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>
)