classnames alternatives and similar libraries
Based on the "CSS / Style" category.
Alternatively, view classnames alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐ -
stitches
[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
Ultra Fast, Zero Runtime, Headless UI Components
๐ปโโ๏ธ A Headless, Utility-First, and Zero-Runtime UI Component Library โจ -
react-look
DISCONTINUED. Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools. -
stilr
Encapsulated styling for your javascript components with all the power of javascript and CSS combined. -
aesthetic
๐จ Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more! -
paperclip
DISCONTINUED. Write durable HTML & CSS for any kind of web application [Moved to: https://github.com/paperclip-ui/paperclip]
Civic Auth - Auth in Less Than 5 Minutes

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of classnames or a related project?
README
Classnames
A simple JavaScript utility for conditionally joining classNames together.
Install with npm, Bower, or Yarn:
# via npm
npm install classnames
# via Bower
bower install classnames
# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classnames
Use with Node.js, Browserify, or webpack:
var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'
Alternatively, you can simply include index.js
on your page with a standalone <script>
tag and it will export a global classNames
method, or define the module if you are using RequireJS.
Project philosophy
We take the stability and performance of this package seriously, because it is run millions of times a day in browsers all around the world. Updates are thoroughly reviewed for performance impacts before being released, and we have a comprehensive test suite.
Classnames follows the SemVer standard for versioning.
There is also a Changelog.
Usage
The classNames
function takes any number of arguments which can be a string or object.
The argument 'foo'
is short for { foo: true }
. If the value associated with a given key is falsy, that key won't be included in the output.
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
Arrays will be recursively flattened as per the rules above:
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
Dynamic class names with ES2015
If you're in an environment that supports computed keys (available in ES2015 and Babel) you can use dynamic class names:
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });
Usage with React.js
This package is the official replacement for classSet
, which was originally shipped in the React.js Addons bundle.
One of its primary use cases is to make dynamic and conditional className
props simpler to work with (especially more so than conditional string manipulation). So where you may have the following code to generate a className
prop for a <button>
in React:
class Button extends React.Component {
// ...
render () {
var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return <button className={btnClass}>{this.props.label}</button>;
}
}
You can express the conditional classes more simply as an object:
var classNames = require('classnames');
class Button extends React.Component {
// ...
render () {
var btnClass = classNames({
btn: true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;
}
}
Because you can mix together object, array and string arguments, supporting optional className
props is also simpler as only truthy arguments get included in the result:
var btnClass = classNames('btn', this.props.className, {
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
Alternate dedupe
version
There is an alternate version of classNames
available which correctly dedupes classes and ensures that falsy classes specified in later arguments are excluded from the result set.
This version is slower (about 5x) so it is offered as an opt-in.
To use the dedupe version with Node.js, Browserify, or webpack:
var classNames = require('classnames/dedupe');
classNames('foo', 'foo', 'bar'); // => 'foo bar'
classNames('foo', { foo: false, bar: true }); // => 'bar'
For standalone (global / AMD) use, include dedupe.js
in a <script>
tag on your page.
Alternate bind
version (for css-modules)
If you are using css-modules, or a similar approach to abstract class "names" and the real className
values that are actually output to the DOM, you may want to use the bind
variant.
Note that in ES2015 environments, it may be better to use the "dynamic class names" approach documented above.
var classNames = require('classnames/bind');
var styles = {
foo: 'abc',
bar: 'def',
baz: 'xyz'
};
var cx = classNames.bind(styles);
var className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz"
Real-world example:
/* components/submit-button.js */
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';
let cx = classNames.bind(styles);
export default class SubmitButton extends Component {
render () {
let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
let className = cx({
base: true,
inProgress: this.props.store.submissionInProgress,
error: this.props.store.errorOccurred,
disabled: this.props.form.valid,
});
return <button className={className}>{text}</button>;
}
};
Polyfills needed to support older browsers
classNames >=2.0.0
Array.isArray
: see MDN for details about unsupported older browsers (e.g. <= IE8) and a simple polyfill.
LICENSE [MIT](LICENSE)
Copyright (c) 2018 Jed Watson. Copyright of the Typescript bindings are respective of each contributor listed in the definition file.
*Note that all licence references and agreements mentioned in the classnames README section above
are relevant to that project's source code only.