DEV Community

Naxrul Ahmed
Naxrul Ahmed

Posted on

1

Pretty Class

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
Enter fullscreen mode Exit fullscreen mode

or

yarn add pretty-class
Enter fullscreen mode Exit fullscreen mode

Usage

Importing the Package

import prettyClass from 'pretty-class';
Enter fullscreen mode Exit fullscreen mode

Function Signature

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

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"
Enter fullscreen mode Exit fullscreen mode

Conditional Classes

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

Nested Arrays

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

Mixed Inputs

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

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
devnax profile image
Naxrul Ahmed

use this package to simplify the process of generating dynamic class names in JavaScript

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay