Classnames

classnames is a JavaScript utility for conditionally joining CSS class names into a single space-separated string. It functions as a class name manager that maps boolean flags and objects to specific styles for HTML attribute assignment.

The tool resolves abstract class identifiers to computed values, facilitating integration with modular styling systems. It allows for the mapping of dynamic identifiers to scoped class names through a dedicated module resolver.

The utility processes strings, arrays, and objects to handle dynamic class name management. It includes capabilities for recursive array flattening and the removal of duplicate entries to ensure unique identifiers in the final output.

Features

Conditional Class Mappings - Conditionally joins strings, arrays, and objects into a single space-separated string for CSS classes.
Class String Joiners - Combines filtered class name fragments into a single string using whitespace as the delimiter.
CSS Module Resolvers - Resolves abstract class identifiers to computed values within modular styling systems.
Dynamic Class Management - Combines multiple strings and objects into a single class attribute for complex UI styling.
CSS Modules - Integrates with CSS Modules to map dynamic identifiers to scoped class names.
Module Resolvers - Maps abstract class identifiers to computed values when using modular styling systems.
CSS Class-Based Styling - Applies CSS classes to elements based on changing state or logic within a JavaScript application.
Abstract Class Resolution - Binds abstract class identifiers to their computed values before final string merging.
Conditional Joining - Conditionally joins CSS class names into a single space-separated string based on truthy values.
Class Mapping - Maps class names to specific module keys to resolve dynamic styles in modular systems.
Class Name Deduplicators - Removes repeated class entries to ensure the final output contains only unique identifiers.
Component Styling - Manages visual state by programmatically toggling CSS classes on frontend components.
Deduplication - Strips repeated entries from the final class string to ensure unique identifiers.

Istoric stele

JedWatsonclassnames

Name: jedwatson/classnames
Author: JedWatson

View on GitHub

17,794 stele557 fork-uriJavaScriptMIT5 vizualizări

Classnames

Features

Conditional Class Mappings - Conditionally joins strings, arrays, and objects into a single space-separated string for CSS classes.
Class String Joiners - Combines filtered class name fragments into a single string using whitespace as the delimiter.
CSS Module Resolvers - Resolves abstract class identifiers to computed values within modular styling systems.
Dynamic Class Management - Combines multiple strings and objects into a single class attribute for complex UI styling.
CSS Modules - Integrates with CSS Modules to map dynamic identifiers to scoped class names.
Module Resolvers - Maps abstract class identifiers to computed values when using modular styling systems.
CSS Class-Based Styling - Applies CSS classes to elements based on changing state or logic within a JavaScript application.
Abstract Class Resolution - Binds abstract class identifiers to their computed values before final string merging.
Conditional Joining - Conditionally joins CSS class names into a single space-separated string based on truthy values.
Class Mapping - Maps class names to specific module keys to resolve dynamic styles in modular systems.
Class Name Deduplicators - Removes repeated class entries to ensure the final output contains only unique identifiers.
Component Styling - Manages visual state by programmatically toggling CSS classes on frontend components.
Deduplication - Strips repeated entries from the final class string to ensure unique identifiers.

Alternative open-source pentru Classnames

Proiecte open-source similare, clasificate după numărul de funcționalități comune cu Classnames.

lukeed/clsx
lukeed/clsx
9,791Vezi pe GitHub
clsx is a JavaScript utility for constructing space-separated CSS class strings. It functions as a logic-based string builder that merges strings and objects into a single string by evaluating the truthiness of provided values. The utility orchestrates the generation of HTML class attributes by filtering out null or undefined values. It enables conditional styling by combining static and dynamic classes, which allows for the management of UI styling based on state or interaction. The project handles a variety of input structures, including arrays and objects, to produce a unified list of act
JavaScript
Vezi pe GitHub9,791
gajus/react-css-modules
gajus/react-css-modules
5,170Vezi pe GitHub
This project is a utility and integration layer for mapping scoped CSS module identifiers to React components. It functions as a wrapper and style manager that translates class names into unique local identifiers to prevent style leakage across an application. The system includes a composition tool for merging multiple CSS module identifiers on single elements and an integration layer that connects SASS, SCSS, and LESS preprocessed style maps to component markup. It covers component styling through encapsulated style mapping and the distribution of styles to child elements. The library also
JavaScript
Vezi pe GitHub5,170
reactjs/react-transition-group
reactjs/react-transition-group
10,258Vezi pe GitHub
This project is a transition component library for React that manages CSS animations during the mounting and unmounting of components. It functions as a CSS class state manager and animation orchestrator, applying specific class sequences to track the entry and exit states of elements. The library coordinates the timing and sequence of multiple elements entering or leaving the screen. This includes managing synchronized group transitions for lists and triggering visual animations when switching between different URL routes. The system covers a range of transition capabilities, including stat
JavaScript
Vezi pe GitHub10,258
dcastil/tailwind-merge
dcastil/tailwind-merge
5,648Vezi pe GitHub
tailwind-merge is a utility library that resolves conflicting Tailwind CSS class strings when combining multiple sets of classes. It automatically detects and removes conflicting utility classes, keeping only the last class from each group that modifies the same CSS property, while preserving non-conflicting and non-Tailwind classes unchanged. The library handles complex conflict scenarios including modifier-order resolution, arbitrary value type detection, postfix modifier semantics, and asymmetric conflicts where one class group removes preceding classes from other groups but not vice versa
TypeScriptcsstailwindcssutility-classes
Vezi pe GitHub5,648

Vezi toate cele 30 alternative pentru Classnames

Întrebări frecvente

Ce face jedwatson/classnames?

Care sunt principalele funcționalități ale jedwatson/classnames?

Principalele funcționalități ale jedwatson/classnames sunt: Conditional Class Mappings, Class String Joiners, CSS Module Resolvers, Dynamic Class Management, CSS Modules, Module Resolvers, CSS Class-Based Styling, Abstract Class Resolution.

Care sunt câteva alternative open-source pentru jedwatson/classnames?

Alternativele open-source pentru jedwatson/classnames includ: lukeed/clsx — clsx is a JavaScript utility for constructing space-separated CSS class strings. It functions as a logic-based string… gajus/react-css-modules — This project is a utility and integration layer for mapping scoped CSS module identifiers to React components. It… reactjs/react-transition-group — This project is a transition component library for React that manages CSS animations during the mounting and… dcastil/tailwind-merge — tailwind-merge is a utility library that resolves conflicting Tailwind CSS class strings when combining multiple sets… astrit/css.gg — css.gg is a collection of visual assets providing a CSS UI icon library and an SVG icon set. It delivers vector icons… stubbornella/oocss — Object-Oriented CSS (OOCSS) is a CSS methodology and framework that structures stylesheets around reusable, composable…