Note: joinClasses is now deprecated and you should use classnames. There is an explanation of how to use classnames at the end of the article.
React has slowly been coming together for me over the past few weeks as I have slowly moved from “how do I get this thing to work?” to “how can I factor this out?” mindset.
As I’ve slowly ventured into composition with React, one of the pain points that I’ve had was elegantly concatenating classes.
After a tip from Beau and some searching, my first try at concatenating classes in React was done using the classSet
utility. And while I was able to use classSet
to concatenate classes in a React component, I didn’t find it to be a very elegant or easily readable solution.
A bit more searching led me to a utility named joinClasses
.
Using React joinClasses to Concatenate Class Names
Here is an example of how I am using joinClasses
to concatenate CSS classes in a React component.
[javascript]
var React = require( ‘react’ ),
joinClasses = require( ‘react/lib/joinClasses’ );
module.exports = React.createClass( {
render: function() {
var selected = ( this.props.selected === this.props.className ? ‘selected’ : ” );
return (
<li className={ joinClasses( this.props.className, selected ) } >
<a href={ this.props.href }> { this.props.label }</a>
</li>
);
}
} );
[/javascript]
this.props.selected
above is a string that represents which sidebar link should be selected and this.props.className
is the class of the current sidebar link.
If the two match, then we want to add a class of selected
to the sidebar item along with any classes that were passed in this.props.className
.
If there were more classes to be conditionally added based on props
that were passed in, I would look into combining the classSet
utility along with the joinClasses
utility.
Using classnames instead of joinClasses
React has deprecated joinClasses and has suggested that developers use the classnames
node module instead.
So, first things first, you’ll want to install classnames
. You can usually do this in the root of your project, and you’ll use this command: npm install classnames
. Note, you might want to use npm install --save-dev classnames
in order to update your package.json
file.
Once you have installed classnames
, you will then need to require it in your JSX file.
[javascript]
var classNames = require( ‘classnames’ );
[/javascript]
Once we have required classnames
, we should be able to simply swap out joinClasses
with classNames
. Here’s an updated example:
[javascript]
var React = require( ‘react’ ),
classNames = require( ‘classnames’ );
module.exports = React.createClass( {
render: function() {
var selected = ( this.props.selected === this.props.className ? ‘selected’ : ” );
return (
<li className={ classNames( this.props.className, selected ) } >
<a href={ this.props.href }> { this.props.label }</a>
</li>
);
}
} );
[/javascript]
Also, because classnames
is so robust and will allow us to send an object to it, we can simplify the code a bit:
[javascript]
var React = require( ‘react’ ),
classNames = require( ‘classnames’ );
module.exports = React.createClass( {
render: function() {
var classes = classNames( this.props.classNames, {
‘selected’: this.props.selected === this.props.className
} );
return (
<li className={ classNames( this.props.className, selected ) } >
<a href={ this.props.href }> { this.props.label }</a>
</li>
);
}
} );
[/javascript]
Leave a Reply