Skip to content

devnax/pretty-class

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pretty Class

pretty-class is a lightweight utility package designed to simplify the process of generating dynamic class names in JavaScript and TypeScript applications. It provides a flexible and intuitive way to conditionally combine class names based on different input types.

Installation

To install pretty-class, use npm or yarn:

npm install pretty-class

or

yarn add pretty-class

Usage

Importing the Package

import prettyClass from 'pretty-class';

Function Signature

export type prettyClassTypes = string | Record<string, boolean> | prettyClassTypes[] | undefined | null | false;
const prettyClass: (...args: prettyClassTypes[]) => string;

Parameters

  • args: A variable number of arguments of type prettyClassTypes. Each argument can be:
    • A string: Adds the string directly to the class list.
    • An object with keys as class names and values as boolean: Includes the key if the value is true.
    • An array: Recursively processes the array elements.
    • undefined, null, or false: Ignored in the output.

Returns

  • A string containing the concatenated class names.

Example Usage

Basic String Input

const result = prettyClass('class1', 'class2');
console.log(result); // Output: "class1 class2"

Conditional Classes

const result = prettyClass({ 'class1': true, 'class2': false, 'class3': true });
console.log(result); // Output: "class1 class3"

Nested Arrays

const result = prettyClass(['class1', { 'class2': true }, ['class3', { 'class4': false }]]);
console.log(result); // Output: "class1 class2 class3"

Mixed Inputs

const result = prettyClass('class1', { 'class2': true }, ['class3', null, false]);
console.log(result); // Output: "class1 class2 class3"

Benefits

  • Lightweight: Minimal code footprint.
  • Flexible: Supports various input types.
  • Recursive: Handles nested arrays gracefully.
  • Typed: Fully typed for TypeScript users.

License

pretty-class is licensed under the MIT License. See the LICENSE file for more details.


For contributions, issues, or feature requests, visit the GitHub repository.

About

A utility for generating CSS class names with ease.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published