0.1.5 • Public • Published


    Build Status Coverage Status npm version

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

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

    After transformation:

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

    3. Complex Example.

        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.


    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": [


    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


    npm i babel-plugin-jsx-conditional-component

    DownloadsWeekly Downloads






    Unpacked Size

    11.8 kB

    Total Files


    Last publish


    • finom