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-mergesortyarn add -D class-mergesortpnpm i -D class-mergesortTakes 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.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"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"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"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"Acts similar to mergeClass but allows more complex structures and types for combining class names.
// Check API documentation for examples.MIT