classnames README

The project's README from github.com/JedWatson/classnames. As one markdown file: README.md.

Classnames

A simple JavaScript utility for conditionally joining classNames together.

Install from the npm registry with your package manager:

npm install classnames

Use with Node.js, Browserify, or webpack:

const 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 implications 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, { baz: null }, ''); // => 'bar'

// conditional strings (falsy results are ignored)
classNames('foo', true && 'bar'); // => 'foo bar'
classNames('foo', false && 'bar'); // => 'foo'

Arrays will be recursively flattened as per the rules above:

const 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:

const 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:

import React, { useState } from 'react';

export default function Button (props) {
  const [isPressed, setIsPressed] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  let btnClass = 'btn';
  if (isPressed) btnClass += ' btn-pressed';
  else if (isHovered) btnClass += ' btn-over';

  return (
    <button
      className={btnClass}
      onMouseDown={() => setIsPressed(true)}
      onMouseUp={() => setIsPressed(false)}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {props.label}
    </button>
  );
}

You can express the conditional classes more simply as an object:

import React, { useState } from 'react';
import classNames from 'classnames';

export default function Button (props) {
  const [isPressed, setIsPressed] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  const btnClass = classNames({
    btn: true,
    'btn-pressed': isPressed,
    'btn-over': !isPressed && isHovered,
  });

  return (
    <button
      className={btnClass}
      onMouseDown={() => setIsPressed(true)}
      onMouseUp={() => setIsPressed(false)}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {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:

const btnClass = classNames('btn', this.props.className, {
  'btn-pressed': isPressed,
  'btn-over': !isPressed && 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:

const 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.

const classNames = require('classnames/bind');

const styles = {
  foo: 'abc',
  bar: 'def',
  baz: 'xyz',
};

const cx = classNames.bind(styles);

const className = cx('foo', ['bar'], { baz: true }); // => 'abc def xyz'

Real-world example:

/* components/submit-button.js */
import { useState } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';

const cx = classNames.bind(styles);

export default function SubmitButton ({ store, form }) {
  const [submissionInProgress, setSubmissionInProgress] = useState(store.submissionInProgress);
  const [errorOccurred, setErrorOccurred] = useState(store.errorOccurred);
  const [valid, setValid] = useState(form.valid);

  const text = submissionInProgress ? 'Processing...' : 'Submit';
  const className = cx({
    base: true,
    inProgress: submissionInProgress,
    error: errorOccurred,
    disabled: 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

Copyright (c) 2018 Jed Watson. Copyright of the Typescript bindings are respective of each contributor listed in the definition file.

classnames (JedWatson/classnames)

Searching Database…

17.8K ·GitHub
Classnames
What is this?A tiny JavaScript utility that conditionally joins className strings together, commonly used to build dynamic 'className' props for React and other UI code.
Is this tied to React, or can I use it with anything?It's framework-agnostic — you can use it with Node.js, Browserify, or webpack bundlers, or just drop index.js on a page as a standalone/AMD script, and it happens to pair especially well with React.
How do I add it to my project?Install it from the npm registry with your package manager (e.g. npm install classnames), then import it in a Node/Browserify/webpack setup, or include index.js directly via a script tag for standalone use.
Does it pull in any other dependencies?No, it has zero runtime dependencies — it's just a single small function you install directly.
Do I need any polyfills to support older browsers?Yes, for classNames >=2.0.0 you need an Array.isArray polyfill to support older browsers such as IE8 and below.
What's the difference between the default version and the dedupe version?The dedupe version correctly removes duplicate classes and excludes falsy classes specified in later arguments, but it runs about 5x slower, so it's offered as an opt-in alternative import.
When would I use the bind variant?The bind variant is aimed at css-modules-style workflows, where you want to bind a styles object once and map style names to the real output classNames, similar to the dynamic-keys approach but reusable.
Can I build class names dynamically with computed keys?Yes, in ES2015/Babel environments that support computed object keys, you can construct className objects with dynamic property names directly.
Is this meant to replace something from React itself?Yes, it's the official replacement for the classSet utility that used to ship in the React.js Addons bundle.
What are similar projects?lollipop-css, validator.js, prism, tween.js, kugiri, anime, velocity, core-js
Which topics is it in?es6, zero-dependency, dom, npm-package, lightweight, javascript-library, css, browser, utility, web-development, react, npm
Creator
JedWatson
Size
0.9 MB
Stars
17.8K
Updated
CommitAug 05
Age
11y
Commits · 90 Days