Registry / babel-plugin-jsx-display-if

babel-plugin-jsx-display-if

library3.0.0jsnpmunverified

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.

npm install babel-plugin-jsx-display-if

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-JSX-D

babel-plugin-jsx-display-if

javascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-plugin-jsx-display-if

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

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

Configure in Babel config, not imported in application code.

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> ); }

Debug

Known issues

gotchaThe 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.

affects: all

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

fix

Upgrade Babel to version 7 or higher.

affects: <7.0.0

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

fix

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

affects: all

Errors

Common errors & fixes

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

Plugin not installed or not in node_modules

fix

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

SyntaxError: Unexpected token (…)

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

fix

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

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

@babel/corerequiredRequires Babel core to run as a plugin

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/craftsy/babel-plugin-jsx-display-if ↗

packagehttps://www.npmjs.com/package/babel-plugin-jsx-display-if ↗