Dynamic fragments in a class name about classnames

[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.