The @maphel/classes package is a TypeScript utility for easily managing CSS class names in your JavaScript or TypeScript application. Ideal for frontend frameworks like React, Angular, and Vue, it lets you dynamically generate className strings using conditions. Merge multiple class names, use conditionals, and manage UI state effortlessly.

• Installation
• Usage
• API
  • Parameters
• Examples
• Contributing
• License

Type Safety: Being written in TypeScript, it offers type safety while handling class names. Conditional Classes: Easily apply class names based on conditions. Array and Object Support: Accepts an array or object of class names, giving you flexibility in how you manage your classes.

Working with dynamic class names often leads to cumbersome ternary or logical operations that can make the code less readable. The @maphel/classes utility helps you create class name strings in a more expressive, readable, and error-free manner.

npm install @maphel/classes

yarn add @maphel/classes

Import @maphel/classes into your TypeScript or JavaScript file.

import { c } from '@maphel/classes';
import classes from '@maphel/classes';

var c = require('@maphel/classes').c;
var classes = require('@maphel/classes').default;

type ClassProps = string | boolean | { [key: string]: string | boolean } | ClassProps[];

c(...args: ClassProps[]): string;
classes(...args: ClassProps[]): string;

• args: CLassProps[]
  Array of CLassProps elements to concatenate.

Returns a concatenated string of class names based on args.

import { c } from '@maphel/classes';

// Basic Usage
const basicResult = c('class1', 'class2');
console.log(basicResult);  // Output: "class1 class2"

// Conditional Usage
const conditionalResult = c('base', { 'active': true, 'disabled': false });
console.log(conditionalResult);  // Output: "base active"

// Array Usage
const arrayResult = c(['array-class1', 'array-class2']);
console.log(arrayResult);  // Output: "array-class1 array-class2"

// Exessive Usage
const exessiveResult = c('a', ['b', 'c'], {d: true}, ['e', {f: true}, ' g', 'h '], [' i ', [{' j': true}]], ' k', 'l ', ' m ');
console.log(exessiveResult);  // Output: "a b c d e f g h i j k l m"

Refer to the CONTRIBUTING.md file for contribution guidelines.

This project is under the MIT License. Refer to the LICENSE.md file for details.