Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published


    Build Status Coverage Status npm downloads

    className and styleName on steroids 💪


    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


    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.


    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>


    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?

    Buy me a coffee


    npm i @maccman/babel-plugin-transform-jsx-classnames

    DownloadsWeekly Downloads






    Unpacked Size

    371 kB

    Total Files


    Last publish


    • avatar