babel-plugin-transform-jsx-class

Support classnames with directive.

Example

In

1import { createElement } from 'react';
2
3export default function Foo(props) {
4  const { message } = props;
5  return (
6    <div x-class={['foo', {
7      bar: true,
8      active: false,
9    }]}>hello world</div>
10  );
11}

Out

1import { createElement } from 'react';
2
3export default function Foo(props) {
4  const { message } = props;
5  return (
6    <div className={classnames(['foo', {
7	    bar: true,
8	    active: false,
9	  }])}>hello world</div>
10  );
11}

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

1{
2  "plugins": ["transform-jsx-class"]
3}

Via CLI

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

Via Node API

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