@kas-tools/babel-plugin-react-visibility-attribute

A Babel plugin that transforms data-if attributes into conditional rendering expressions (cond && <Component />) at build time

The main purpose is to "make markup clean again" ✊

✨ Features

You write

• <SomeComponent data-if={condition} /> And it's transforms into (but you don't see it)
• condition && <SomeComponent />

🔧 Install

npm install @kas-tools/babel-plugin-react-visibility-attribute --save-dev

🧪 Usage

babel.config.js

{
  "plugins": [
    [
      "@kas-tools/babel-plugin-react-visibility-attribute",
      {
        "attrName": "data-if",
        "enabled": true
      }
    ]
  ]
}

vite.config.js

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            '@kas-tools/babel-plugin-react-visibility-attribute',
            {
              attrName: 'data-if',
              enabled: true,
            },
          ],
        ],
      },
    }),
  ],
});

🧾 Example

Input in dev mode

<SomeComponent data-if={isVisible} />

In the browser

// If isVisible === true

<SomeComponent />

// If isVisible === false

null; // nothing

Output in production build

isVisible && <SomeComponent />;

🧪 Test

npm i -ddd
npm test

🖤 Inspiration

This package inspired by post How to add custom attribute for conditional render? from Mahdi (github, official website)

MIT License © 2025