Dynamic fragments in a class name

[peterszerzo]

On a project I am currently working on, I encounter some situations where a class name is built up dynamically based some variable, for example: 'help help--' + props.position, resulting in help help--left, help help--top, help help--right. This library would make this code much more expressive if it supported a syntax such as the following:

var cls = classNames({
    'help': true,
    'help--${0}': [ props.position ]
}, { interpolate: true });

The character 0 inside the syntax notation would indicate that the 0th (first) element of the array should be used.

To improve performance, this behavior can be switched off by not setting the interpolate option to true (no interpolation by default).

Is there an interest to have a feature like this in the library (if so, I am happy to implement it)? Any ideas for a better syntax?

[rbsmidt]

Hi Pickled-plugins

I'm looking for the exact same in a project, that i'm working on. So yes - there's interest in such a feature, at least from me :-)

Other than that, i'm very pleased with classNames, so thanks to the author for a nice piece of work.

[dcousens]

Why not just

classnames({
    'help': true,
    `help--${props.position}`: !!props.position
})

This would already work in ES6 AFAIK.

[rbsmidt]

Might be a possibility - however i'm currently using JSX with watch-compiler but not ES6.
My issue is, that i want a category-label as a classname in addition to other dynamic classes (active-state e.g.). So what i want to do is:
var classes = classNames({ 'active': active, //where active is a bool {this.props.cat.slug}: true })

I'm still new to React, so maybe i'm trying to use the wrong tool for this operation, or maybe i just doesn't use it right. But if i try your suggestion, my JSX watch task gives me following error:

Parse Error: Line xxx: Unexpected token {

If i wrap the category slug ref in quotes, it obviously just treats my var ref as a string.
Am i trying to bend classNames in directions, that i shouldn't?

[longlho]

@rbsmidt you can read up on template string and have babel compiles your stuff

[dcousens]

Closing, this is easily solved by just using ES6.
If you really need it, you can still solve the solution in a classical way.

No point special casing this library just for this.

[peterszerzo]

@dcousens thank you for the tip. I did not know that interpolation worked for object keys, which makes your solution the best way to go.