@bahaa95/classname v1.0.2

@bahaa95/classname

A lightweight JavaScript function for conditional joining classNames together, it also work with deeply nested objects and array to improve readability and grouping.

Installation

Install remove-unknown-properties

  #npm
  npm install @bahaa95/classname

  #yarn
  yarn add @bahaa95/classname

Usage/Examples

import { classname } from '@bahaa95/classname';

const isDisabled = false;
const isLoading = true;
const theme = "light"

const classnames = classname(
    "primary",
    null,
    " ",
    false && "border-blue",
    [true && "text-l", {'text-white': theme === 'dark'}],
    {
      row:true,
      disabled: isDisabled || isLoading,
      display:["flex","row","items-center"],
    }
);

console.log(classnames); //=> "primary text-l row disabled flex row items-center"

Realtime Example

import { classname as cx } from "@bahaa95/classname";

function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="App">
      <input
        className={cx({
          pointer:true,
         //when a property has a value type of array or object the property name     
         //will not included in the result classes. it will use property name for 
         //grouping only in our case (text, active, display) properties below will not 
         //included to result.
          text: {
            "text-roboto": true,
            "text-l": true,
            "text-bold":false,
          },
          display:["flex","row","items-center"],
          active: isActive && ["border-blue", "bg-white", true && "text-black"],
        })}
        onFocus={() => setIsActive(true)}
        onBlur={() => setIsActive(false)}
      />
    </div>
  );
}