explaingit

jedwatson/classnames

17,800JavaScriptAudience · developerComplexity · 1/5Setup · easy

TLDR

A tiny JavaScript utility that builds CSS class name strings from conditions, pass strings, arrays, and objects and it returns only the class names whose conditions are true, eliminating messy string concatenation.

Mindmap

mindmap
  root((classnames))
    What it does
      Conditional class assembly
      Cleans up string logic
      No if-chains needed
    Tech stack
      JavaScript
      Node.js
      Browser
    Use cases
      React components
      Dynamic class strings
      CSS Modules
    Features
      String and array inputs
      Object truthy filtering
      Dedup variant
    Audience
      Frontend developers
      React developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Conditionally apply CSS classes in a React component based on state without writing messy ternary chains.

USE CASE 2

Merge className props passed in from a parent with a component's own internal conditional classes.

USE CASE 3

Build dynamic class strings for UI elements like buttons that have multiple visual states such as active or disabled.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min
License terms not described in the explanation.

In plain English

classnames is a tiny JavaScript utility that helps you build CSS class name strings from multiple conditions. In web development, HTML elements get their visual styles applied through class names, strings like "btn btn-pressed btn-large", and when your code needs to decide which classes apply based on application state, assembling that string gets messy fast. The problem is straightforward: you might have a button that needs the class "btn" always, plus "btn-pressed" only when the user is clicking, plus "btn-over" only when the cursor is hovering, and you want to avoid writing long chains of if-statements to manually concatenate these strings. classnames accepts any mix of strings, arrays, and objects, and combines them into a single class string. When you pass an object, keys whose values are truthy (meaning true or a non-empty value) get included, falsy values get excluded. For example, passing the object {btn: true, 'btn-pressed': isPressed} produces "btn btn-pressed" only when isPressed is true. Null, false, and undefined arguments are silently ignored, so you can safely pass optional values without extra checks. The library is most commonly used with component-based JavaScript UI frameworks where components receive class names from parent components and need to merge them with their own internal conditional classes. It installs from npm with a single command and works in both Node.js server environments and directly in browsers. There are also variant builds for deduplicating repeated class names and for working with CSS Modules (a system where class names are locally scoped). The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Show me how to use classnames in a React button component to conditionally apply active, disabled, and size variant classes based on props.
Prompt 2
Write a React component using classnames that correctly merges a className prop from the parent with its own internal conditional classes.
Prompt 3
How do I use the classnames/dedupe build variant to ensure no duplicate class names appear in the final class string?
Prompt 4
Show me how to use classnames with CSS Modules so locally scoped class names and conditional logic work cleanly together.
Prompt 5
Rewrite this ternary-chain class string using classnames: className={isActive ? 'btn btn-active large' : 'btn large'}.
Open on GitHub → Explain another repo

← jedwatson on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.