Have ideas to improve npm?Join in the discussion! »


    1.2.0 • Public • Published


    Build Status Coverage Status npm downloads

    className and styleName on steroids 💪


    Allow you to write jsx classNames in a simpler way, without having to worry about importing a helper (like clsx or classnames). className or styleName 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


    When babel-plugin-transform-jsx-classnames cannot resolve className / styleName 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
      plugins: [
        ['transform-jsx-classnames', {
          // default options
          dedupe: false,
          attributes: ['className', 'styleName']

    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 className / styleName during the compilation (className={"foo", { active: true }}) and fallback to runtime if not possible (className={_cx("bar", { disabled: props.disabled })} - a tiny helper (256B minified) will be included automatically.

    Runtime helper

    The runtime helper is similar to the clsx package. See examples.


    Dedupe behaves like the classname dedupe version. Way faster though. Its speed is similar to classnames in no dedupe version.

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


    See benchmark dir.


    Build time

    <div className={"foo", "bar"}><div className="foo bar"></div>
    <div className={'foo', { bar: true }}><div className="foo bar"></div>
    <div className={{ 'foo-bar': true }}><div className="foo-bar"></div>
    <div className={{ 'foo-bar': false }}><div className=""></div>
    <div className={{ foo: true }, { bar: true }, ["foobar", "duck"]}><div className="foo bar foobar duck"></div>
    <div className={'foo', { bar: true, duck: false }, 'baz', { quux: true }}><div className="foo bar baz quux"></div>
    <!-- styleName -->
    <div styleName={"foo", "bar"}><div styleName="foo bar"></div>
    <!-- Dedupe -->
    <div className={'foo foo', 'bar', { bar: true, foo: false }}><div className="bar"></div>
    <!-- No change -->
    <div className={props.active ? "foo" : "bar"}><div className={props.active ? "foo" : "bar"}></div>


    When className / styleName can't be resolved at compilation.

    <div className={"foo", { active: props.active }}><div className={_cx("foo", { active: props.active })}></div>
    <div className={{ foo: true, [`btn-${props.type}`]: true }}><div className={_cx({ foo: true, [`btn-${props.type}`]: true })}></div>
    <div className={"foo", props.active && getClassName()}><div className={_cx("foo", props.active && getClassName())}></div>

    Send some love

    You like this package?

    Buy me a coffee


    npm i babel-plugin-transform-jsx-classnames

    DownloadsWeekly Downloads






    Unpacked Size

    1.92 MB

    Total Files


    Last publish


    • avatar