{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/how-to-handle-conditional-classnames-in-react/", "result": {"data":{"markdownRemark":{"html":"

We can dynamically construct class names in React using a library named clsx.

\n

Installation

\n
npm install --save clsx
\n

Syntax

\n
clsx({ "your-class-name": booleanValue })
\n

We pass an object to the clsx function with class names that we want to apply to a specific element.

\n

Example

\n
import React from "react"\nimport clsx from "clsx"\n\nconst App = () => {\n  const className = clsx({\n    className1: true,\n    className2: true,\n  })\n\n  console.log(className)\n  // "className1 className2"\n  console.log(typeof className)\n  // string\n\n  return <h1>Hello World!</h1>\n}\n\nexport default App
\n

We have set the values of two class names - className1 & className2 - to true. So, clsx returns a string (line 13) containing both class names separated by space (line 11).

\n
import React from "react"\nimport clsx from "clsx"\n\nconst App = () => {\n  const className = clsx({\n    className1: true,\n    className2: false,\n  })\n\n  console.log(className)\n  // "className1"\n  console.log(typeof className)\n  // string\n\n  return <div></div>\n}\n\nexport default App
\n

Now, we have set the value of className2 to false, so the resulting string contains only className1.

\n

Let's consider an example.

\n

We have the App component that receives a theme prop.

\n
src/App.js
\n
import React from "react";\nimport clsx from "clsx";\n\nconst App = ({ theme }) => {\n  const className = clsx({\n    welcome: true,\n    [theme]: true,\n  });\n\n  return <h1 className={className}>Hello World</h1>;\n};\n\nexport default App;
\n

We want to apply two class names to the h1 element: welcome and whatever is the value of the theme prop. On line 7, note that we have the theme prop in brackets []. This means that the name of the property will be computed based on the value of the theme prop.

\n

Below, we have passed the App component a theme prop with the value of light. So, the class name that will be applied to the h1 element is \"welcome light\".

\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "./index.css";\nimport App from "./App";\n\nReactDOM.render(\n  <>\n    <App theme="light" />\n  </>,\n  document.getElementById("root")\n);
\n

Then, we can style the h1 element based on different class names applied to it.

\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n}\n\n.welcome {\n  font-size: 2rem;\n  margin: 2rem;\n}\n\n.dark {\n  color: red;\n}\n\n.light {\n  color: gold;\n}
\n

Because we have passed a theme prop to the App component with the value of light and in index.css we have applied the css rule color: \"gold'; to the light class, we see Hello World being rendered in gold color.

\n

\n \n .grvsc-code > .grvsc-line::before {\n content: ' ';\n position: absolute;\n width: 100%;\n }\n \n .grvsc-line-diff-add::before {\n background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n }\n \n .grvsc-line-diff-del::before {\n background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n }\n \n .grvsc-line-number {\n padding: 0 2px;\n text-align: right;\n opacity: 0.7;\n }\n \n .synthwave-84 { background-color: #262335; }\n .synthwave-84 .mtki { font-style: italic; }\n .synthwave-84 .mtk1 { color: #FFFFFF; }\n .synthwave-84 .mtk6 { color: #36F9F6; }\n .synthwave-84 .mtk16 { color: #FF8B39; }\n .synthwave-84 .mtk14 { color: #B6B1B1; }\n .synthwave-84 .mtk3 { color: #FF7EDB; }\n .synthwave-84 .mtk8 { color: #72F1B8; }\n .synthwave-84 .mtk10 { color: #FEDE5D; }\n .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n .synthwave-84 .mtk5 { color: #F97E72; }\n .synthwave-84 .mtk9 { color: #FE4450; }\n .synthwave-84 .mtk4 { color: #848BBD; }\n .synthwave-84 .grvsc-line-highlighted::before {\n background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n }\n","frontmatter":{"title":"How to Handle Conditional Class Names in React?","date":"2021-06-29"}}},"pageContext":{"slug":"/how-to-handle-conditional-classnames-in-react/","prev":{"fields":{"slug":"/review-june-2021/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/using-the-usereducer-hook-for-state-management-in-react/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}