babel-plugin-jsx-conditional-component

    0.1.5 • Public • Published

    babel-plugin-jsx-conditional-component

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

    Install

    npm i babel-plugin-jsx-conditional-component

    DownloadsWeekly Downloads

    130

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • finom