Skip to content
A tiny (223B) utility for constructing `className` strings conditionally.
Branch: master
Clone or download
Latest commit af19571 Apr 6, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
bench chore: update browser charts Apr 6, 2019
src chore: rearrange pkg keys Apr 6, 2019
test fix: ignore function types Apr 6, 2019
.editorconfig initial commit Dec 24, 2018
.gitignore initial commit Dec 24, 2018
.travis.yml initial commit Dec 24, 2018
clsx.d.ts fix: allow `undefined` in typings (#6) Feb 3, 2019
license initial commit Dec 24, 2018
package.json 1.0.4 Apr 6, 2019 chore: update size Apr 6, 2019

clsx Build Status

A tiny (223B) utility for constructing className strings conditionally.
Also serves as a faster & smaller drop-in replacement for the classnames module.

This module is available in three formats:

  • ES Module: dist/clsx.m.js
  • CommonJS: dist/clsx.js
  • UMD: dist/clsx.min.js


$ npm install --save clsx


import clsx from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'



Returns: String


Type: Mixed

The clsx function can take any number of arguments, each of which can be an Object, Array, Boolean, or String.

Important: Any falsey values are discarded!
Standalone Boolean values are discarded as well.

clsx(true, false, '', null, undefined, 0, NaN);
//=> ''


For snapshots of cross-browser results, check out the bench directory~!


  • obj-str - Similar utility that is faster and smaller (96B) but only works with Objects.


MIT © Luke Edwards

You can’t perform that action at this time.