babel-plugin-transform-jsx-classnames

className and styleName on steroids 💪

Usage

Allow you to write jsx classNamess in a simpler way, without having to worry about importing a helper (like classnames). classNames or styleNames attributes take any number of arguments which can be a string, an array or an object (if the value associated with a given key is falsy, that key won't be included in the output). See examples

Install

When babel-plugin-transform-jsx-classnames cannot resolve classNames / styleNames during compilation, it imports a helper function (read build time resolution). Therefore, you must install babel-plugin-react-css-modules as a direct dependency of the project.

$ npm install babel-plugin-transform-jsx-classnames --save

Add to .babelrc:

{
  plugins: ['transform-jsx-classnames']
}

Note: ⚠️ If you're using babel-plugin-react-css-modules, ensure you're adding transform-jsx-classnames before

Build time resolution

The plugin will try to resolve the classNames / styleNames during the compilation (classNames={"foo", { active: true }}) and fallback to runtime if not possible (classNames={_cx("foo", { active: props.active })} - a tiny helper (~0.3Ko) will be included automatically.

Runtime helper

The runtime helper is very similar to the classnames package. It actually behaves like its dedupe version.

The only difference you'll find will be with full numeric classNamess: output will always spit numbers first (ex: classNames={"a", 12} => classNames="12 a"). It shouldn't be a big deal though, as using numeric values for classNamess is pretty rare and order only matters in a very few specific cases.

Performance & dedupe

Dedupe has been optimized a lot and its performance is very similar to classnames (in no dedupe mode). It's even better in some cases.

Examples

Build time

<div classNames={"foo", "bar"}>
→ <div classNames="foo bar"></div>

<div classNames={'foo', { bar: true }}>
→ <div classNames="foo bar"></div>

<div classNames={{ 'foo-bar': true }}>
→ <div classNames="foo-bar"></div>

<div classNames={{ 'foo-bar': false }}>
→ <div classNames=""></div>

<div classNames={{ foo: true }, { bar: true }, ["foobar", "duck"]}>
→ <div classNames="foo bar foobar duck"></div>

<div classNames={'foo', { bar: true, duck: false }, 'baz', { quux: true }}>
→ <div classNames="foo bar baz quux"></div>

<!-- styleNames -->
<div styleNames={"foo", "bar"}>
→ <div styleNames="foo bar"></div>

<!-- Dedupe -->
<div classNames={'foo foo', 'bar', { bar: true, foo: false }}>
→ <div classNames="bar"></div>

<!-- No change -->
<div classNames={props.active ? "foo" : "bar"}>
→ <div classNames={props.active ? "foo" : "bar"}></div>

Runtime

When classNames / styleNames can't be resolved at compilation.

<div classNames={"foo", { active: props.active }}>
→ <div classNames={_cx("foo", { active: props.active })}></div>

<div classNames={{ foo: true, [`btn-${props.type}`]: true }}>
→ <div classNames={_cx({ foo: true, [`btn-${props.type}`]: true })}></div>

<div classNames={"foo", props.active && getClassName()}>
→ <div classNames={_cx("foo", props.active && getClassName())}></div>

Send some love

You like this package?