https://github.com/dirheimerb/class-mergesort
A css class utility for sorting arrays of objects by a given key
https://github.com/dirheimerb/class-mergesort
classname-to-css classnames css-utility-classes
Last synced: 11 months ago
JSON representation
A css class utility for sorting arrays of objects by a given key
- Host: GitHub
- URL: https://github.com/dirheimerb/class-mergesort
- Owner: dirheimerb
- License: mit
- Created: 2023-10-26T23:35:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-27T01:11:26.000Z (over 2 years ago)
- Last Synced: 2025-03-27T02:15:38.869Z (about 1 year ago)
- Topics: classname-to-css, classnames, css-utility-classes
- Language: TypeScript
- Homepage: https://dirheimerb.github.io/class-mergesort/
- Size: 81.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Class MergeSort
[](https://badge.fury.io/js/class-mergesort)
- [Class MergeSort](#class-mergesort)
- [Installation](#installation)
- [Documentation](#documentation)
- [API Overview](#api-overview)
- [`toggleClass`](#toggleclass)
- [`prefixClass`](#prefixclass)
- [`suffixClass`](#suffixclass)
- [`filterClass`](#filterclass)
- [`mergeClass`](#mergeclass)
- [`classNameX`](#classnamex)
- [License](#license)
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.
## Installation
Choose your package manager to install `class-mergesort`.
```bash
npm i -D class-mergesort
```
```bash
yarn add -D class-mergesort
```
```bash
pnpm i -D class-mergesort
```
## Documentation
[Docs](https://dirheimerb.github.io/class-mergesort)
## API Overview
### `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.
```typescript
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.
```typescript
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.
```typescript
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.
```typescript
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.
```typescript
// 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.
```typescript
// Check API documentation for examples.
```
## License
MIT