classnames-helper v1.0.3

Description

This small package is a simple alternative to other solutions available on npm.

The goal is to reduce the amount of code it takes to describe the structure of an element's classnames.

The classnames-helper offers a simple way to join classnames with optional conditions while removing unnecessary spaces.

How to install

npm install classnames-helper

Usage

import cn from 'classnames-helper';

The function cn accepts an unlimited number of arguments.

Arguments

Each argument must be one of the following:

Example

import React, { useState } from "react";
import cn from "classnames-helper";

const STATE = {
  DEFAULT: 0,
  PRIMARY: 1,
  DANGER: 2,
};

function ReactComponent() {
  const [isActive, setActive] = useState(true);
  const [isHidden, setHidden] = useState(false);
  const [state, setState] = useState(STATE.PRIMARY);

  // ...

  // Define order of classes and conditions
  const className = cn(
    "c-component-name",
    [isActive, "-active"],
    [isHidden, "-hide", "-show"],
    [state, "-default", "-primary", "-danger"],
    "some-other-class"
  );

  return (
    <button type="button" className={className} onClick={...}>Click Me</button>
  );
}

export default ReactComponent;

The ouput :

<button type="button" className="c-component-name -active -show -primary some-other-class">
  Click Me
</button>