A simple javascript utility for conditionally joining classNames together (by JedWatson)

Classnames Alternatives

Similar projects and alternatives to classnames

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a better classnames alternative or higher similarity.

Suggest an alternative to classnames

Reviews and mentions

Posts with mentions or reviews of classnames. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-10-14.
  • How to Pass Components as Props in React | 2021-10-19
    All component styling in this application will be done using CSS Modules and to join them through conditions I will use the classnames dependency.
  • Type-safe development with Vite x React x CSS Modules x TypeScript | 2021-10-14
    When developing with React and CSS Modules, you may find that the styling part is not type-safe.Introducing a more mold-safe styling method. With vite-plugin-sass-dts, which automatically creates a d.ts file from the* .module.scss file. Introducing how to use classnames-generics, which allows you to use classnames more type-safely. increase.
  • Concat Class Names | 2021-10-14
    When I began to work with React I used to install and import classnames in any project. But I found that a smaller and simple helper function is sufficient for all of my projects:
  • (part2) Use the classnames library more safely. | 2021-10-11
    Using previous post, [classnames] I've shown you how to use ( more safely. This is not enough for styling with CSS Modules on React. Suppose you have the following components. ```tsx:header/index.tsx import React, {VFC} from 'react'; import styles from './index.module.scss'
  • Use the classnames library more safely | 2021-10-09
    The classnames library is widely used when using CSS Modules in React. If you use it as it is, the key you specify is not type-safe and you may be a little worried. Introducing the means to use it more safely. The methods introduced here are published in classnames-generics.
  • Changing CSS to Modular, question about syntax | 2021-10-05
    There's a really nice, small library which solves this problem and other conditional class name use-case. I'd recommend classnames.
  • How to add multiple CSS classes in React | 2021-09-23
    There is a handy library named classnames, which can be used if there are many classes and complex conditions.
  • React JS | 2021-09-16
    Share this library with your team op
  • What's your must have React library(s)? | 2021-09-14
    styled componets: I'll never write CSS in a separate file anymore in my life.
  • Question regarding styling! Which one is better? | 2021-09-07
    Use the classNames package to simplify conditional styling.
  • SSR for multiple breakpoints using React | 2021-08-31
    Lastly, the component loops through selected themes to apply rendering logic and boundary class names. All selected themes are rendered on the server, whereas only the matched theme is rendered on the client. suppressHydrationWarning property is necessary to prevent warnings when the VDOM tree branch is omitted during hydration render. cx function is used to concatenate class names, see classnames package. themeNameMapper is a hashmap that stores theme names keyed by breakpoints.
  • classnames is not a large dependency, only 729 bytes, but clsx is fully compatible with classnames at just 516 bytes. So, replacing classnames with clsx in your app will save you 213 bytes.
    friendly reminder of what classnames does
  • Better conditional css classes in React | 2021-08-24
    merge-class-names at an incredibly tiny 372 bytes
  • Need help on setting active class to only 1 button | 2021-08-23
    A react project is incompleted without classnames
  • Help with styled components. | 2021-08-10
    It would be. Also check classnames for a more readable solution similar to how Vue and Angular solve this issue.


Basic classnames repo stats
12 days ago

JedWatson/classnames is an open source project licensed under MIT License which is an OSI approved license.

Scout APM: A developer's best friend. Try free for 14-days
Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
Find remote JavaScript jobs at our new job board There are 17 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.