Skip to content
Get packs

classnames

A small JavaScript helper that builds CSS class name strings from strings, arrays, and conditional objects.

GitHub Download source
Stars
17.8k
Forks
557
Licence
MIT
Language
JavaScript
Last update
16 days ago
Type
Library

What it is

Classnames is a tiny JavaScript function that joins class names into one string. You pass it plain strings, arrays, or objects where each key is a class name and its value decides whether that class is included. It is mainly used when writing HTML or React components whose class names change based on state.

  • Toggle a 'btn-pressed' class on a button based on whether it is being pressed
  • Accept an optional className prop and merge it with a component's base classes
  • Map class names to css-modules output with the bind variant
  • Build conditional class strings with an object like { active: isActive, disabled: isDisabled }

Great for

  • Front-end developers building components whose CSS classes change with state or props
  • React developers who want to avoid manual string concatenation for className props
  • Projects that need to merge an optional className passed in from a parent component
  • Developers using css-modules who want a bind helper to map class names to generated values

Not ideal for

  • People who do not write JavaScript or work with HTML class names, since it has no use outside that context
  • Teams that need deduplication by default, because the standard version does not dedupe; the dedupe variant is slower (about 5x, per the README)
Step-by-step guide: how to use classnamesInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js or a bundler such as webpack or Browserify (for module use)

    Install from npm

    npm install classnames
  2. 2

    Run it

    • Install the package with npm install classnames.
    • Import it with const classNames = require('classnames'); or an ES module import.
    • Call classNames('foo', 'bar') and check that it returns 'foo bar'.
    • Add an object argument such as { baz: true } to see conditional classes appear.
  3. 3

    Get the most out of it

    • Use the dedupe variant (require('classnames/dedupe')) when duplicate or overridden classes could appear.
    • Use the bind variant (require('classnames/bind')) with css-modules to map names to generated class values.
    • Pass objects with computed keys like { [`btn-${type}`]: true } in ES2015 environments.
    • Read the HISTORY.md changelog before upgrading between versions.

Downloads

Source code (.zip)main branch · straight from GitHub

Strengths

  • Very small and simple API: strings, arrays, and objects are all accepted
  • Falsy values such as null, false, undefined, and empty strings are ignored, reducing guard code
  • Maintained with a published test suite and SemVer versioning, according to the README

Trade-offs

  • The default version does not dedupe classes or drop falsy classes from later arguments; you must opt into the dedupe variant
  • Dedupe version is noticeably slower (about 5x per the README), so it is opt-in
  • Older browsers may need polyfills such as Array.isArray for versions 2.0.0 and later

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.