https://github.com/andria-dev/classnames
A fast and tiny JavaScript utility for joining classNames together
https://github.com/andria-dev/classnames
Last synced: 3 months ago
JSON representation
A fast and tiny JavaScript utility for joining classNames together
- Host: GitHub
- URL: https://github.com/andria-dev/classnames
- Owner: andria-dev
- License: mit
- Created: 2018-12-29T19:00:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-04T12:41:42.000Z (over 6 years ago)
- Last Synced: 2025-03-17T21:12:07.178Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://npm.im/@chbphone55/classnames
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:**
### First let's import it
```js
// Node
const { classNames } = require('@chbphone55/classnames');
// ESM
import { classNames } from '@chbphone55/classnames';
```
### Now let's use it
```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'
```
### NOTE: extra spaces will not affect use with DOM elements (includes framework elements like React)
## 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](https://github.com/ChrisBrownie55/classnames/blob/master/LICENSE) Copyright © 2018 Christopher Brown
Influenced by Jed Watson's [classnames](https://github.com/JedWatson/classnames)