https://github.com/andria-dev/classnames

A fast and tiny JavaScript utility for joining classNames together
https://github.com/andria-dev/classnames

Last synced: 23 days 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 (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-04T12:41:42.000Z (almost 5 years ago)
• Last Synced: 2024-11-18T11:16:37.339Z (about 1 month 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)