babel-plugin-jsx-display-if

3.0.0 verified Sat Apr 25 auth: no javascript

Babel plugin that adds an `display-if` attribute to JSX elements to conditionally render them, inspired by Angular's ng-if. v3.0.0 (latest) is a stable release with no active development. It transforms `<Comp display-if={condition} />` into `{condition && <Comp />}`, making conditional rendering more readable for non-developers. Compared to inline ternaries or helper functions, this plugin provides a declarative, template-like syntax. Only compatible with Babel 7+ and requires the JSX transform. Minimal footprint with no runtime dependencies.

Common errors

error Error: Cannot find module 'babel-plugin-jsx-display-if' ↓

cause Plugin not installed or not in node_modules

fix

Run npm install --save-dev babel-plugin-jsx-display-if

error SyntaxError: Unexpected token (…) ↓

cause Babel version not supported (pre-v7) or missing necessary presets

fix

Ensure Babel 7+ and appropriate presets (e.g., @babel/preset-react) are installed.

Warnings

gotcha The plugin does not support nested `display-if` attributes on the same element; only the outermost is evaluated. ↓

fix Use a single conditional expression or wrap with a fragment.

gotcha The plugin expects Babel 7+; older versions may cause syntax errors or unexpected behavior. ↓

fix Upgrade Babel to version 7 or higher.

gotcha The attribute name must be `display-if` (hyphenated). Using camelCase will not work. ↓

fix Use lowercase attribute name: `display-if={condition}`.

Install

npm install babel-plugin-jsx-display-if

yarn add babel-plugin-jsx-display-if

pnpm add babel-plugin-jsx-display-if

Imports

babel-plugin-jsx-display-if

wrong

import plugin from 'babel-plugin-jsx-display-if' in source files

correct

This is a Babel plugin, not imported in source code. Add to .babelrc or babel.config.js: {"plugins": ["jsx-display-if"]}

Configure in Babel config, not imported in application code.

Quickstart

Shows how to configure the Babel plugin in .babelrc and use the display-if attribute in a JSX component.

// .babelrc
{
  "plugins": ["jsx-display-if"]
}

// Example component
function colorSwatch({ color }) {
  return (
    <div>
      <ColorSwatch display-if={color} color={color} />
    </div>
  );
}