Front-End Insights

[NMM #2] Dynamic React className – the way to achieve it

NMMProgramming

Today is the last day of the month. This means that this is the last time to publish a post from the “NPM module of the month” series… This time I will show you a very helpful library which I use in almost every React component. It is just called classnames and it is, in my opinion, the best way to achieve dynamic React className values.

Let’s see how we can use it!

Installation and usage

Before I show you how “classnames” helps in working with dynamic React className values, let’s shortly take a look at how to install it. It’s pretty simple obviously:

npm install classnames

I’m sure all of you expected this, didn’t you? 😉 Now, you can import (or require) it in your project and just use it. Ok, but how can we use the “classnames” library?

This is also actually straightforward. Please see the example below for using the “classnames” library (from the README of the project):

import classNames from 'classnames';

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

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

As you can see, the classNames method which is imported in the first line gets strings and/or objects as the parameters. If you pass only string params, it just concatenates them by placing an empty space between them.

The second, and more interesting, way of using it is to pass an object as a parameter. The properties of this object should be set to the boolean value. If you set the value to true it will return the string with the name of the property. If it is false it will instead omit this property in the string. As a result we get a string with every true property concatenated. Simple, right?

How “classnames” helps in dynamic React className

Ok. So now, how can we use it to deal with dynamic React className values? Please take a look at the sample implementation of the render method of a React component:

import classNames from 'classnames';

...

render() {
  const elementClass = classNames({
    'content': true,
    'content-specific': this.state.contentSpecific
  });
  
  return (
    <div className={elementClass}>
      ...
    </div>
  );
}

In the above code we used the classNames function to prepare the class string for the returned div element. Please note that the content-specific property of the object passed to the classNames function depends on the components state value. If the contentSpecific state property is set to true, the content-specific property name is added to the returned string. Otherwise it isn’t.

Summary

I think the “classnames” library is very helpful in creating dynamic React className values. I almost always use it in my React components and I wonder what you think about it? Do you know it?

Related Post

I recommend Nozbe

Simply Get Everything Done

Get your tasks and projects done thanks to Nozbe system and apps for the Mac, Windows, Linux, Android, iPad and iPhone.

If you want to know more about Nozbe and its capabilities, please take a look at my article about this great application.