https://github.com/meowtec/react-auto-classnames
JSX runtime for applying `clsx()` automatically
https://github.com/meowtec/react-auto-classnames
classnames react
Last synced: 4 months ago
JSON representation
JSX runtime for applying `clsx()` automatically
- Host: GitHub
- URL: https://github.com/meowtec/react-auto-classnames
- Owner: meowtec
- License: mit
- Created: 2021-10-02T16:37:09.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-09-30T12:58:39.000Z (almost 4 years ago)
- Last Synced: 2025-08-09T14:18:29.592Z (11 months ago)
- Topics: classnames, react
- Language: JavaScript
- Homepage:
- Size: 115 KB
- Stars: 22
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-auto-classnames
JSX runtime for applying `clsx()` to `className` prop automatically.
NOT a babel plugin.
## Installation
```
npm i react-auto-classnames
```
## Usage
If you use TypeScript, edit your `tsconfig.json` like:
```js
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react-auto-classnames",
}
}
```
If you use `@babel/preset-react` to transform jsx:
```js
// .babelrc / babel.config.json
{
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic",
"importSource": "react-auto-classnames"
}
]
]
}
```
If you use esbuild (take *vite* for example):
```js
{
esbuild: {
jsxFactory: 'createElement',
jsxFragment: 'Fragment',
jsxInject: 'import { createElement, Fragment } from \'react-auto-classnames\'',
},
}
```
Then you can write React code like this:
```js
function App() {
return (
)
}
```
[clsx](https://github.com/lukeed/clsx) will be used to handle the `className` prop.