JIYIK CN >

This article will explain clsx()functions and conditionally applying classes in React.

The function in the package of the same name clsx()is a JavaScript utility that sets classNamethe condition for setting the value of a property. It accepts an unlimited number of arguments and is not restricted to one specific type.

Ultimately, clsx()the function returns an stringinterpolation that checks booleanthe value of the JavaScript variable and applies the class accordingly.

clsx()It is certainly possible to write these strings yourself, but it is much more time consuming than simply using the function.

Check out the official npm documentation .

React developers use clsx()functions to apply classes.

We can set conditions that need to be met for a specific class to be applied, but this is not required.

example:

import "./styles.css";
import clsx from "clsx";
const classNameOne = "redButton";
const classNameTwo = "blueBorder";
export default function App() {
    const number = 3;
    return (
        <div className="App">
        <button className={clsx(classNameOne, { [classNameTwo]: number > 5 })}>
            A sample button
        </button>
        </div>
    );
}

In the example above, we have two variables with string type values. We also have a variable called that numberis set to an arbitrary number to demonstrate clsx()how a function can be conditionally applied (or not applied) to a specified class.

classNameOneThe first argument to the function does not have any condition associated with it, so it will usually be applied anyway. The second argument is an object with pairs classNameTwoof properties key-valueand the condition as its value.

In this case, numberthe variable has the value of 3, which is no more than 5, so NA classNameTwodoes not apply. Try changing the values ​​on CodeSandbox and see what happens for yourself.

This is an example of basic conditional styling. At first glance, you may not understand why clsx()the function is needed, but once your styling conditions become more complex, clsx()it allows you to set these conditions easily.