A simple and small JavaScript utility for joining class names together
npm install @chbphone55/classnamesA 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.
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
;
}
``Influenced by Jed Watson's classnames