# class-name-mixin

> Mixin to easily bring in ClassNames from props.

Latest version **1.0.0** (published 2015-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install class-name-mixin
pnpm add class-name-mixin
yarn add class-name-mixin
bun add class-name-mixin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2015-01-16 |
| First published | 2015-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Russell Ahlstrom |
| Maintainers | janiv |

## Links

- npm: https://www.npmjs.com/package/class-name-mixin
- Repository: https://github.com/deseretdigial-ui/ClassNameMixin
- Homepage: https://github.com/deseretdigital-ui/ClassNameMixin
- Issues: https://github.com/deseretdigital-ui/ClassNameMixin/issues
- npm.io page: https://npm.io/package/class-name-mixin

## Recent versions

- 1.0.0 (latest) — 2015-01-16

## README

# ClassNameMixin

Mixin to easily bring in ClassNames from props.

## Example

```js
  var ExampleComponent = React.createClass({
    mixins: [ClassNameMixin],

    render: function() {
      if (this.state.renderAsCollapsible) {
        return this.renderAsCollapsible();
      } else {
        return this.renderAsDropdown();
      }
    },

    renderAsDropdown: function() {
      return (
        <div className={this.getClassName('example-component--dropdown')}>
          This is our collapsible example!
        </div>
      );
    },

    renderAsCollapsible: function() {
      return (
        <div className={this.getClassName('example-component--collapsible')}>
          This is our dropdown example!
        </div>
      );
    },

    getComponentClassName: function() {
      return 'example-component';
    }
  });

  React.render(
    <ExampleComponent className="custom-class" />,
    document.getElementById('classNameMixinExample')
  );
```

### Output

#### Collapsible

```html
<div class="example-component example-component--collapsible custom-class">
  This is our collapsible example!
</div>
```

#### Dropdown

```html
<div class="example-component example-component--dropdown custom-class">
  This is our dropdown example!
</div>
```

## Mixin Properties

The mixin adds the following properties:

  * className

### className

__Type:__ string or classSet object
__Default:__ `{}`

Additional class names to add to be merged in to the arguments passed to getClassName

#### String

A simple string of classes to add to the component.

```js
React.render(
  <ExampleComponent className="custom-block custom-block--modifier" />,
  document.getElementById('classNameMixinExample')
);
```

#### classSet Object

An object with class names as keys with a value of true or false. All keys with the value of true will be added to the component. All keys with the value of false will be removed from the component.

```js
React.render(
  <ExampleComponent className={{'custom-block': true, 'custom-block--modifier': true}} />,
  document.getElementById('classNameMixinExample')
);
```

## Mixin Methods

The mixin adds the following methods:

  * getClassName

### getClassName

__Arguments:__

  * className - string | object OPTIONAL

__Return:__ string

Accepts a string of a classSet object as an argument. Returns a string of the computed classes.

This method merges the class names from getComponentClassName, the className argument, and the className property. In the case of duplicate class names, the className argument beats getComponentClassName and the className property beats both. A string of space delimited class names is returned to be used in a React className attribute.

## Optional Component Methods

The mixin looks for the following component methods and uses them if defined:

  * getComponentClassName

### getComponentClassName

__Return:__ string | object

This method should be used to return either a string or classSet object of default classes for the component. This method is called automatically by getClassName and has the argument from getClassName and this.props.className merged into it.

---
_Source: https://npm.io/package/class-name-mixin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._