babel-jsx-render-tools

A babel plugin for render conditional in reactjs/native (like *ngIf of Angular)

Example:

<MyComponent renderIf={ item }>
  { item.title }
</MyComponent>

Result:

item && <MyComponent>{item.title}</MyComponent>

Summary

• Introducing
• Installation
• renderIf prop
• Switch Tag

Introducing

It's a package that is inspirated in jsx-control-statements. Some features does not is present in jsx-control-statements, like a prop that makes conditional rendering easier and has the characteristic of the switch

Installation

npm i --save-dev babel-jsx-render-tools
// or
yarn add -D babel-jsx-render-tools

Add to .babelrc:

  {
    "plugins": [
        "module:babel-jsx-render-tools"
    ]
  }

renderIf prop

In whatever component, add prop renderId

<Component renderIf={true}><div>test</div></Component>
// result:
true && <Component><div>test</div></Component>

Switch Tag

use:

<Switch var={test}>
  <Case equal={1}>
    <span>It's one</span>
  </Case>
  <Case equal={2}>
    <span>It's two</span>
  </Case>
  <Default>
    <span>Unknown</span>
  </Default>
</Component>
// result:
test === 1? <span>It's one</span>: test === 2? <span>It's two</span>: <span>Unknown</span>