Hello, my friends

Welcome to @wescatt/cn, let me introduce this package for you. It's simply and the function is same with https://github.com/SGLara/cn.

Features

• Combine multiple class names, arrays, and conditional objects.
• Lightweight and fully TypeScript compatible.

How to use?

If you have a component need to dynamically change classname, you can use cn function like below:

// react component
const App=()=>{
const [isBlack,setIsBlack]=useState(false);

    return(
        <div
         className={cn("my-component",{'bg-black':isBlack},['classname',['classname'],{classname:true},...classname])}
         onClick={()=>setIsBlack(!isBlack)}
        >
        WesCatt is handsome !!!
        </div>
    )
}


// css
.my-component{
    // default white
    background:#fff;
}

.bg-black{
    background:#000;
}

Installation

npm install @wescatt/cn

Haha, It's very simple, isn't it?