Super friendly introduction to classnames in React

If you have been writing ReactJS applications, you might have stumbled upon the classnames npm package from the classnames npm package. Here is a beginner friendly intro to classnames.

So, why do we use classnames?

Because they help us to conditionally show content based on state.

In this tutorial we are going to build an application that toggles between different states as shown below using classnames

Prerequisites before reading this article ☺️

It’ would be nice to have some basic understanding of:

ReactJS

CSS

JavaScript

Here is an example

Let’s start by bootstrapping a react application using the create-react-app command

Head over to the terminal and type

npx create-react-app classnames-intro

After the set up is complete,

cd classnames-intro
code .

The code . command opens Visual Studio code if you have it installed on your machine if it hasn’t install visual studio code editor here and learn how to configure visual studio code to boot up when after running code . command here.

Now let’s learn the classnames magic

Our initial directory structure for this tutorial looks like this

For the simplicity of this tutorial, we’ll work on the App.js file and the App.css file. So click on the App.js file. Start by clearing off the following code that comes by default,

<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>

So that we are left with the following code

//import logo from './logo.svg';  YOU CAN DELETE THIS TOO
import './App.css';
function App() {
return (
<div className="App">
</div>
 );
}
export default App;

Lets start by intrdoducing some state into the application

import { useState } from "react"

The useState hook helps us manage state in a react application. The state we will introduce in this application will be named toggleState and will be initialized to false.

const [toggleState, setToggleState] = useState(false)

For us to toggle in between states we’ll have to have a function that changes the toggleState state.

const handleToggleState = () => {
  setToggleState(!toggleState)
}

We’ll now add a button that will utilize this function

<button onClick={handleToggleState}>
   Toggle {toggleState ? "off" : "on"}
</button>

To see the button in action, head over to the terminal using classnames-intro directory as your base and type

npm start 

This will open the browser at localhost:3000/

Let’s add some more content to our page,

<div>
{toggleState ? <p>is On</p> : <p>is Off</p>}
</div>

Such that our code now looks like (new code is in bold)

import { useState } from "react"
import "./App.css"
function App() {
const [toggleState, setToggleState] = useState(false)
const handleToggleState = () => {
 setToggleState(!toggleState)
}
return (
<div className="App">
 <div>
  {toggleState ? <p>is On</p> : <p>is Off</p>}
 </div>
  <button onClick={handleToggleState}>
   Toggle {toggleState ? "off" : "on"}
  </button>
 </div>
)
}
export default App

Let’s bring classnames to action now! CMD + ` or CTRL + ` opens the terminal in Visual Studio Code. In this terminal type,

npm i classnames --save

In the App.js file, bring in classnames

import cx from "classnames"

In our App.css file let’s add some styling that will help us demostrate the use of classnames. Delete the intial App.css code and replace it with

.App {
 text-align: center;
}
.state {
background-color: #fff;
}
.on {
background-color: red;
}
.off {
background-color: green;
}

In the App.js file create an object called toggleClasses with the following key value pairs

const toggleClasses = {
  state: true,
  on: toggleState,
  off: !toggleState
}

The key value pairs will be responsible for the css that will be shown in our application.

Again, change the div with the <p></p> tags to the following (change in the code is in bold)

<div className={toggleClasses}>
{toggleState ? <p>is On</p> : <p>is Off</p>}
</div>

If you head back to the browser and click on the button there will be no change but after using cx from classnames we will see some change. So change the toggleClasses object to the following (code change is in bold)

const toggleClasses = cx({
  state: true,
  on: toggleState,
  off: !toggleState,
})

Make sure npm start is running and in your browser and try clicking the toggle button. You’ll notice that the background color of the div with the paragraph changes based on whether the toggleState is true or false. Great!

Our final App.js file looks like this,

import { useState } from "react"
import "./App.css"
import cx from "classnames"

function App() {
const [toggleState, setToggleState] = useState(false)
const handleToggleState = () => {
  setToggleState(!toggleState)
}
const toggleClasses = cx({
  state: true,
  on: toggleState,
  off: !toggleState,
})
return (
<div className="App">
   <div className={toggleClasses}>
    {toggleState ? <p>is On</p> : <p>is Off</p>}
   </div>
   <button onClick={handleToggleState}>
    Toggle {toggleState ? "off" : "on"}
   </button>
  </div>
 )
}
export default App

Our final App.css code looks like this,

.App {
text-align: center;
}

.state {
background-color: #fff;
}

.on {
background-color: red;
}
.off {
background-color: green;
}

That was a short introduction to classnames in react. The github for this project can be found here 👉🏻 classnames-intro/repo

You can also check out this project in this sandbox

A class component based of this project can be found in this sandbox-class

I hope you’ve learnt something you can add into your projects.

Thanks for reading!