babel-plugin-jsx-conditional-component

babel-plugin-jsx-conditional-component

The plugin is a fork of babel-plugin-jsx-base-component made by Yurii Khmelvskii. Originally it was forked to add support for Babel 7 but unfortunately my PR wasn't approved.

This is Babel 7 plugin allowing to use <Base /> component in your jsx. It has two properties:

• exists - specifies whether the component content is shown
• component - shows which component <Base /> actually is. It is <div /> by default

In addition <Base /> component can take properties, that will be passed to component.

This component can help make your render method more readable and concise.

Syntax and use cases

To show the purpose of <Base /> component let's consider its variants of use and the result of its transformation:

1. List ul content is any.

<Base exists={props.comments.length !== 0} component="ul">
  ...
</Base>

After transformation:

{ props.comments.length !== 0 ? <ul> ... </ul> : null }

2. You can use conditions in component property, and also pass any react-components to it.

<Base component={props.targetBalnk ? 'a' : Link} href="/dashboard">
  Dashboard
</Base>

After transformation:

const Component = props.targetBalnk ? 'a' : Link;
...
return (
  <Component href="/dashboard">
    Dashboard
  </Component>
);

3. Complex Example.

  <Base
    component={props.status === 'important' || props.blockApp ? ImportantBar : AlertBar}
    exists={props.isOpen || props.blockApp}
    className={scss.alertBar} icon="car" text={props.text}
  />

After transformation:

const Component = props.status === 'important' || props.blockApp ? ImportantBar : AlertBar;
...
return (
  {
    props.isOpen || props.blockApp
    ? <Component className={scss.alertBar} icon="car" text={props.text} />
    : null
  }
);

Note: After transformation this plugin does not create any additional spans or other wrapping tags.

Installation

As a prerequisite you need to have Babel installed and configured in your project.

Install via npm:

  npm install babel-plugin-jsx-conditional-component --save-dev

Then you only need to specify jsx-base-component as Babel plugin, which you would typically do in your .babelrc:

"plugins": [
  ...
  "jsx-base-component"
]

Linting

Since <Base /> component is transformed using Babel, you don't need to import (import) or plug it in (require). But in its turn it will result in ESLint warning that Base variable is undefined. To fix this, just add Base as global variable in your .eslintrc

"globals": {
  ...
  "Base": true
}