babel-plugin-transform-jsx-class

Support classnames with directive.

Example

In

import { createElement } from 'react';

export default function Foo(props) {
  const { message } = props;
  return (
    <div x-class={['foo', {
      bar: true,
      active: false,
    }]}>hello world</div>
  );
}

Out

import { createElement } from 'react';

export default function Foo(props) {
  const { message } = props;
  return (
    <div className={classnames(['foo', {
	    bar: true,
	    active: false,
	  }])}>hello world</div>
  );
}

Installation

$ npm install babel-plugin-transform-jsx-class

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-jsx-class"]
}

Use custom directive

{
  "plugins": [
    ["transform-jsx-class", {
      "directive": "classList" // default: x-class
    }]
  ]
}

Via CLI

$ babel --plugins transform-jsx-class script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-jsx-class"]
});