https://github.com/matthewoden/classchain

A small utility for joining classnames together. Works well with css modules.
https://github.com/matthewoden/classchain

Last synced: about 1 month ago
JSON representation

A small utility for joining classnames together. Works well with css modules.

• Host: GitHub
• URL: https://github.com/matthewoden/classchain
• Owner: matthewoden
• Created: 2015-11-04T19:31:21.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-06T17:15:50.000Z (about 9 years ago)
• Last Synced: 2024-10-12T09:24:56.842Z (3 months ago)
• Language: JavaScript
• Size: 129 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#classchain - npm

A very small utility for conditionally chaining classnames together. Intended for use with CSS Modules/React.

## Installation:

```

npm install classchain

```

Works in commonjs, requirejs, and webpack. If added via `````` tag, it creates a global classchain method.

## Usage

The classchain method takes any number of arguments, which can be arrays of two items ( in ```[classname, condition]``` format), or a string. Numbers are converted to strings, and falsy conditions are ignored.

```javascript

var classchain = require('classchain');

classchain('foo', ['bar', true]);  // => 'foo bar'

classchain('foo', ['bar', false]); // => 'foo'

classchain('foo bar'); // => 'foo bar'

// non string values converted to strings if possible, otherwise ignored.

classchain('foo', [1, true]); // => 'foo 1';

// classnames where conditions evaluate to false are ignored.

classchain('foo', ['bar', null], ['baz', undefined]); //=> 'foo'

```

### Usage with React.js

```javascript

var classchain = require('classchain');

var Button = React.createClass({

  // ...

  render () {

    var btnClass = classchain('btn',

                  ['btn--pressed', this.state.isPressed],

                  ['btn--over', !this.state.isPressed && this.state.isHovered]);

    return <button className={btnClass}>{this.props.label}</button>;

  }

});

```

### Usage with Webpack/CSSModules

```javascript

var classchain = require('classchain');

var styles = require('./styles.css');

var Button = React.createClass({

  // ...

  render () {

    var btnClass = classchain(styles.main,

                  [styles.pressed, this.state.isPressed],

                  [styles.over, !this.state.isPressed && this.state.isHovered]);

    return <button className={btnClass}>{this.props.label}</button>;

  }

});

```

## ...Doesn't the Classnames library already do this?

It does! Normally, it does an exceptional job. But relying on the object literal format means it stumbles when classnames aren't hard-coded strings. Which means we have to either transpile object literals into something the classnames module can understand, or rely on it's alternate bind format.

Classchain isn't any more verbose, but accepts formats outside of string.