# babel-plugin-jsx-classnames

> babel plugin for automatically adding `classnames()` to `className` attribute.

Latest version **1.0.1** (published 2017-09-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-jsx-classnames
pnpm add babel-plugin-jsx-classnames
yarn add babel-plugin-jsx-classnames
bun add babel-plugin-jsx-classnames
```

## 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.1 |
| Published | 2017-09-21 |
| First published | 2017-09-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | meowtec |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-jsx-classnames
- npm.io page: https://npm.io/package/babel-plugin-jsx-classnames

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) *
- [babel-plugin-syntax-jsx](https://npm.io/package/babel-plugin-syntax-jsx.md) ^6.18.0

## Recent versions

- 1.0.1 (latest) — 2017-09-21
- 1.0.0 — 2017-09-20

## README

# babel-plugin-jsx-classnames
babel plugin for automatically adding `classnames()` to `className` attribute.

transform

```javascript
<div className={expression}></div>
```

to

```javascript
<div className={classNames(expression)}></div>
```

## Why

### classNames

In React, when you need to render conditionally classNames, you can write code like this:

```javascript
<button className={`${active ? 'btn-active' : ''} ${disabled ? 'btn-disabled' : ''}`}>
</button>
```

[classnames](https://github.com/JedWatson/classnames) can help you write clear conditionally classNames:

```
<button
  className={classNames({
    'btn-active': active,
    'btn-disabled': disabled,
  })}>
</button>
```

### babel-plugin-jsx-classnames

This babel plugin will keep you away from writing many `classNames`, make the code clean and easy to read.

## Usage

Install:

```
npm i babel-plugin-jsx-classnames --save-dev
```

Use plugin (example .babelrc):

```json
{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    ...
    "jsx-classnames"
  ]
}
```

Write your jsx:

```javascript
<button
  className={{
    'btn-active': active,
    'btn-disabled': disabled,
  }}>
</button>
```

It will be transformed to:

```javascript
import classNames from 'classnames'

<button
  className={classNames({
    'btn-active': active,
    'btn-disabled': disabled,
  })}>
</button>
```

---
_Source: https://npm.io/package/babel-plugin-jsx-classnames · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._