Class MergeSort is a utility library designed to facilitate the manipulation and combination of CSS classes in TypeScript and JavaScript applications. It provides various utilities to toggle, prefix, suffix, filter, merge, and more.
Choose your package manager to install class-mergesort
.
npm i -D class-mergesort
yarn add -D class-mergesort
pnpm i -D class-mergesort
toggleClass
Takes a class name and a boolean condition. If the condition is true, it returns the class name; otherwise, an empty string is returned.
const isActive = true;
const activeClass = toggleClass('active', isActive);
// Output: "active" if isActive is true, "" otherwise.
prefixClass
Prepends a specified prefix to each class name in the list. Particularly useful for frameworks like Bootstrap.
const prefixedClasses = prefixClass('btn-', 'primary', 'large');
// Output: "btn-primary btn-large"
suffixClass
Appends a specified suffix to each class name in the list. Useful for BEM methodology.
const suffixedClasses = suffixClass('--disabled', 'button', 'input');
// Output: "button--disabled input--disabled"
filterClass
Filters class names based on a custom condition function. Only the class names that meet the condition will be included in the result.
const filteredClasses = filterClass(
(name) => !name.includes('omit'),
'button',
'omit-me',
);
// Output: "button"
mergeClass
Combines multiple class names into a single string, while eliminating duplicates and empty strings.
// Multiple class name strings
const merged1 = mergeClass('btn btn-primary', 'btn-secondary', 'btn');
// Output: "btn btn-primary btn-secondary"
// Array of class names
const merged2 = mergeClass(['btn', 'btn-large'], ['btn-small', 'btn']);
// Output: "btn btn-large btn-small"
// Mixed types
const merged3 = mergeClass('btn btn-primary', ['btn-secondary', 'btn-large']);
// Output: "btn btn-primary btn-secondary btn-large"
classNameX
Acts similar to mergeClass
but allows more complex structures and types for combining class names.
// Check API documentation for examples.
MIT