classnames

A simple and small JavaScript utility for joining class names together. Made for use with frameworks like React, but can be used how you see fit.

Installation:

``bash
npm i @chbphone55/classnames

or

yarn add @chbphone55/classnames
`

Usage:

$3

`js
// Node
const { classNames } = require('@chbphone55/classnames');

// ESM
import { classNames } from '@chbphone55/classnames';
`

$3


`js
/ STRINGS /
classNames('loading-indicator', 'red-bg');
// => 'loading-indicator red-bg'

/ OBJECTS, falsey values cause extra spaces /
classNames({ animated: 'truthy value', 'inactive-bg': false });
// => 'animated '

/ OBJECTS & STRINGS /
classNames('loading-indicator', { animated: true });
// => 'loading-indicator animated'

/ ARRAYS (recursively flattened) /
classNames(['activated', { nested: true }]);
// => 'activated nested'

/*
All other types will be ignored but will cause extra spaces
if they are either, falsey object (null) or not an object/string/array
*/
classNames('test', undefined);
// => 'test '

classNames(null, 'test');
// => ' test'

/ Multiple of same value will not be removed as there is no need /
classNames('test', 'test', 'test');
// => 'test test test'
`

$3

What about using it in React.js?

You simply pass the call to classNames() as the value for the attribute className={}

`jsx harmony
/ REACT CLASS COMPONENT /
class MyComponent extends React.Component {
render() {
const { className } = this.props;
return

;
}
}

/ REACT FUNCTION COMPONENT /
function MyComponent({ className }) {
return

;
}
``

License

MIT Copyright © 2018 Christopher Brown

Influenced by Jed Watson's classnames