Using the classnames library for conditional CSS in React

[00:00] Classnames is a deceptively simple JavaScript utility for conditionally joining class names together. It used to be in the React Main library, but then they took it out and now Jed Watson maintains it, and this guy has a great GitHub repo, so I'd recommend looking at his stuff. Anyways, we're going to use Classnames today to create a toggle switch. It's going to be a very simple little React component that looks a little bit something like this. We'll click in there, it just goes on and off, just like that.

[00:33] In order to get this into our project, we need to go to our project, and I'm inside the project right now. Then we're going to do NPM install Classnames Save. So when we do that, it's going to go ahead and download it and add it to our package.json. Once that's done, we're going to go to our React component. Now I have another version of this component that we're going to build up towards this one.

[01:04] We have this one, and I have this other one here, I clicked on this tab, and this one when I click on it, the transition doesn't take place and the on and off just changed. What's going on is this, it's a Classnames example, and all it does is it has an isOn state, and base on that state it'll toggle certain properties. So isOn when it's on, it says on and off, and this circle will also change.

[01:33] The first thing we want to do is import the Classnames library into our project, and what we're going to do is just import at the top under the Classnames namespace, and we're also going to import it as CX, we're going to do the shorthand version of this, we're just going to make things just a little bit easier when we're writing out code. One of the first things that I want to do, is I have a few classes that I want to toggle based on this isOn bool.

[02:02] We're going to go ahead and create a constant, we're going to call this circleClasses. We're going to use the CX function to create an object, and this object is going to be translated into a simple string that's going to be our class names. This is our circle right here, he has a circle class that's off, because right now it's in the off state. What we want to do is we're just going to translate these to the Classnames library. So we're going to do circle and since we always want circle to be true, we're going to go ahead and hit true.

[02:37] So we're going to pass a Boolean to this key-value pair, and what CX does, is it' going to take the key and create the string from it based on the Boolean value. So the off state though, is going to be based on our isOn state, so if it is not on, just like this, then it's going to be off, and then it's going to add the off state. Now we need to take this object and put it here, so it's actually referencing these classes.

[03:08] We're going to go ahead and create that object, go circleClasses, and now when we save and go back to our component, we'll notice that nothing's changed except for now we're seeing this disappear, because now off is not even being included inside the classes. We're going to go ahead and console that out. We console that out you can see what's going on, it makes a lot more sense.

[03:34] Go ahead and console.log, open up the inspector, and now when we pull this open, I'm going to refresh, I'm going to see it says circleOff, and now we have Circles, that's what the class names are being set to, it's pretty simple. We also want to create an on state here, so this is pretty simple. I have a CSS class that's called On, and we're just going to go ahead and map it to the isOn state property.

[04:02] Now when we go over to our class, we can see circleOff and then circleOn, and it's transitioning the circle over, doing like I showed before. Now we need to take care of the text itself, and to take care of the text, we're going to do this. We're going to create another class, we're going to call it textClasses. We're going to go CX, create that object, and we're going to take that textOff property right here, and paste it as the key, because we're going to want to go into the Classnames.

[04:30] We want this to be tied to this.state.isOn as well. Once we do that, we can copy and paste this into this object here, and save it, and we'll go back to what we're working on, and now we can see that we have a working toggle switch that is pretty cool. That is Classnames.