CODEWITHSUNDEEP
javascriptcssclassreactjs
jasan
jasan

Reputation: 12927

Is there a better way to assign multiple css classNames to React components?

I'm using css modules and at the moment my method for assigning multiple classes to components is:

import {class1,class2 } from './styles.css' <div><Link to = 'auth' className= {[`${class1} ${class2}`]} >Login</Link></div>

this just doesnt seem efficient nor elegant.

Upvotes: 2

Views: 216

Answers (2)

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

Yes there is a utility called classnames https://github.com/JedWatson/classnames

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

For your specific usage

const klassNames = classNames(`${class1} ${class2}`);
div><Link to = 'auth' className= {klassNames} >Login</Link></div>

I agree you might say this is the same as your previous code but see if want to add classes based on some conditions this is highly beneficial

Another Example 

const klassNames = classNames(`${class1}`, {
`${class2}`: someCondition === true,
`${class3}: someCondition === false
}

I am using in my large react project really solves if else conditioning for classes

Example

Upvotes: 0

StateLess
StateLess

Reputation: 5402

You can use classnames (as mentioned by official react documentation)

link to github : https://github.com/JedWatson/classnames

const class = {class1:true,class2:onlyIfFalgisTrue};

then you can use it as

<div><Link to = 'auth' className= {class} >Login</Link></div>

Upvotes: 1

Related Questions