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.

Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

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!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay