# babel-plugin-react-jsx-classnames

> 在react项目中className的值自动加上className()

Latest version **1.0.6** (published 2021-03-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-react-jsx-classnames
pnpm add babel-plugin-react-jsx-classnames
yarn add babel-plugin-react-jsx-classnames
bun add babel-plugin-react-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.6 |
| Published | 2021-03-05 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | day |
| Maintainers | dsy4719 |
| Keywords | react, jsx, classnames |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-react-jsx-classnames
- Repository: https://github.com/Dsy4719/babel-plugin-react-jsx-classnames
- Homepage: https://github.com/Dsy4719/babel-plugin-react-jsx-classnames#readme
- Issues: https://github.com/Dsy4719/babel-plugin-react-jsx-classnames/issues
- npm.io page: https://npm.io/package/babel-plugin-react-jsx-classnames

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2021-03-05
- 1.0.5 — 2021-03-05
- 1.0.4 — 2021-03-05
- 1.0.3 — 2021-03-05
- 1.0.2 — 2021-03-05
- 1.0.1 — 2021-03-05
- 1.0.0 — 2021-03-05

## README

# babel-plugin-react-jsx-classnames
在react项目中className的值自动加上className()

```
// 转换前
<div className={expression}></div>

// 转换后
import classNames from 'classnames'
<div className={classNames(expression)}></div>
```

## 使用

安装:

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

yarn add babel-plugin-react-jsx-classnames -D
```

使用插件

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

## 为什么

此babel插件是为了开发者方便

1.  因为使用classnames的时候, 每次都需要引入classnames, 产生重复代码块

2. jsx className有多个类名的时候比较麻烦, 所以使用classnames友好的解决了这个问题

   ```
   // 不使用classnames
   <div className={`${styles.wrap ${styles.bgColor}}`}></div>
   <div className={[styles.wrap,styles.bgColor].join(' ')}></div>
   
   // 使用classnames
   <div className={className([styles.wrap,styles.bgColor])}></div>
   
   // 使用babel-plugin-react-jsx-classnames
   <div className={[styles.wrap,styles.bgColor]}></div>
   
   ```

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