Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Maybe render a React component, maybe not šŸ˜®

Build Status dependencies Status Code Climate JavaScript Style Guide

// 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.



There are three props you can use: of, when and with.

  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.

  when={() => checkWhatever()}


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.

  of={<p>Either this</p>}
  or={<p>Or this one</p>}

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.

  of={<p>Either this</p>}
  or={<p>Or this one</p>}
  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.

  when={props.something > 10}
  with={[props, 'thisProps', 'andThisOther']}

Same can be applied for orWith attribute.


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


Stop doing this:

// no more dumb render methods pollution
const renderSomething = (canRender, propsFromParent) => {
  if (!canRender) return null

  return <Something {...propsFromParent} />

const Parent = (props) => (
    {renderSomething(props.a === props.b, props)}
You canā€™t perform that action at this time.