Description

joinclass is a lightweight utility to join and convert a list of classes. Supports string, number, array, object (level 1), function, Set, Map, CSS Modules and prefix/suffix. Perfect for Tailwind, CSS Modules, or plain class names.

Installation

npm install --save joinclass
# or
yarn add joinclass

Import the module in the place you want to use:

import classes from "joinclass";

Snippet

import styles from "./Button.module.css";

// Join string, array, null and use prefix + CSS Module mapping
joinclass("btn", ["btn-large", null, "active"], { prefix: "ui-", styles });
// => "ui-btn ui-btn-large ui-active"

// Object with conditional classes and function
joinclass({ primary: true, disabled: false }, () => "dynamic-class");
// => "primary dynamic-class"

// Using Set
joinclass(new Set(["set-class", "btn"]));
// => "set-class btn"

// Using Map
joinclass(new Map([["map-class", true], ["skip-class", false]]));
// => "map-class"

Features

• Conditional classes (falsey values ignored)

• Function returning class / boolean

• Prefix / Suffix support

• Type-safe object dictionary

• Set / Map input supported

• Deduplicate classes automatically

• Compatible with CSS Modules and Tailwind

License

MIT