{"id":19091,"library":"babel-plugin-jsx-display-if","title":"babel-plugin-jsx-display-if","description":"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.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/craftsy/babel-plugin-jsx-display-if","tags":["javascript","babel","plugin","jsx","react","ng-if","display-if","conditional","react-component"],"install":[{"cmd":"npm install babel-plugin-jsx-display-if","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-jsx-display-if","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-jsx-display-if","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires Babel core to run as a plugin","package":"@babel/core","optional":false}],"imports":[{"note":"Configure in Babel config, not imported in application code.","wrong":"import plugin from 'babel-plugin-jsx-display-if' in source files","symbol":"babel-plugin-jsx-display-if","correct":"This is a Babel plugin, not imported in source code. Add to .babelrc or babel.config.js: {\"plugins\": [\"jsx-display-if\"]}"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"jsx-display-if\"]\n}\n\n// Example component\nfunction colorSwatch({ color }) {\n  return (\n    <div>\n      <ColorSwatch display-if={color} color={color} />\n    </div>\n  );\n}","lang":"javascript","description":"Shows how to configure the Babel plugin in .babelrc and use the display-if attribute in a JSX component."},"warnings":[{"fix":"Use a single conditional expression or wrap with a fragment.","message":"The plugin does not support nested `display-if` attributes on the same element; only the outermost is evaluated.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade Babel to version 7 or higher.","message":"The plugin expects Babel 7+; older versions may cause syntax errors or unexpected behavior.","severity":"gotcha","affected_versions":"<7.0.0"},{"fix":"Use lowercase attribute name: `display-if={condition}`.","message":"The attribute name must be `display-if` (hyphenated). Using camelCase will not work.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev babel-plugin-jsx-display-if`","cause":"Plugin not installed or not in node_modules","error":"Error: Cannot find module 'babel-plugin-jsx-display-if'"},{"fix":"Ensure Babel 7+ and appropriate presets (e.g., @babel/preset-react) are installed.","cause":"Babel version not supported (pre-v7) or missing necessary presets","error":"SyntaxError: Unexpected token (…)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}