https://github.com/toviszsolt/clsx-react
A custom React JSX runtime that natively supports arrays and objects in the className prop. It automatically applies clsx logic at the runtime level, keeping your code clean and your imports empty.
https://github.com/toviszsolt/clsx-react
classname classnames clsx css jsx jsx-runtime jsx-syntax react reactjs styling-react typescript utility-classes
Last synced: 9 days ago
JSON representation
A custom React JSX runtime that natively supports arrays and objects in the className prop. It automatically applies clsx logic at the runtime level, keeping your code clean and your imports empty.
- Host: GitHub
- URL: https://github.com/toviszsolt/clsx-react
- Owner: toviszsolt
- License: mit
- Created: 2026-01-05T04:54:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-04-30T18:21:12.000Z (about 1 month ago)
- Last Synced: 2026-04-30T20:13:19.619Z (about 1 month ago)
- Topics: classname, classnames, clsx, css, jsx, jsx-runtime, jsx-syntax, react, reactjs, styling-react, typescript, utility-classes
- Language: JavaScript
- Homepage: https://codesandbox.io/p/devbox/broken-fog-m82g3j?file=%2Fapp%2Flayout.tsx%3A1%2C1
- Size: 556 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://github.com/toviszsolt/clsx-react/blob/main/LICENSE) [](https://www.npmjs.com/package/clsx-react) [](https://github.com/toviszsolt/clsx-react/stargazers) [](https://github.com/toviszsolt/clsx-react/actions/workflows/test.yml) [](https://codecov.io/gh/toviszsolt/clsx-react) [](https://github.com/sponsors/toviszsolt)
# `clsx-react` - JSX Super Power for `className`
**Stop importing `clsx` or `classnames` manually.**
`clsx-react` is a zero dependency, super tiny, custom React JSX runtime that natively supports **arrays** and **objects** in the `className` prop. It automatically applies `clsx` logic at the runtime level, keeping your code clean and your imports empty.
## The Problem
You need conditional class names in your React components, but importing and using `clsx` or `classnames` everywhere leads to repetitive boilerplate code.
```jsx
// ❌ Old way: Boilerplate everywhere
import clsx from 'clsx'; // or classnames
export const Button = ({ active, disabled }) => (
Click me
);
```
## The Solution
No more imports or boilerplate. Just use arrays and objects directly in `className`. Strings still work as usual.
```jsx
// ✅ New way: Zero imports, native syntax
export const Button = ({ active, disabled }) => (
Click me
);
```
## Installation
```bash
npm install clsx-react
# or
yarn add clsx-react
# or
pnpm add clsx-react
```
> **Note:** Requires `react` >= 17.0.0.
## Configuration
To make this work, you need to tell your compiler to use this package as the JSX Import Source instead of the default `react`. Let me guide you through the setup for various environments.
### 1. TypeScript (`tsconfig.json`) / JavaScript (`jsconfig.json`) - **Recommended**
This handles both the compilation and the type definitions (so TS won't complain about arrays in `className`).
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "clsx-react"
}
}
```
---
### 2. Vite (`vite.config.ts`) / Esbuild
If you are using Vite, you can set it explicitly in the config:
```javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
esbuild: {
jsxImportSource: 'clsx-react',
},
});
```
---
### 3. Next.js / SWC / Turbopack
Next.js usually respects `tsconfig.json` or `jsconfig.json`. Ensure your `compilerOptions` are set as shown in step 1.
---
### 4. Babel / Webpack
If you are using Babel, you can set the `jsxImportSource` in your Babel config:
```json
{
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic",
"importSource": "clsx-react"
}
]
]
}
```
## Usage Examples
Once configured, you can use `className` just like you would use the `clsx` function arguments.
### Conditional Classes (Object)
```jsx
...
```
### Arrays
```jsx
...
```
### Mixed & Nested
```jsx
...
```
### Standard String (Still works)
```jsx
...
```
## How it works
This package wraps the standard `react/jsx-runtime` and `react/jsx-dev-runtime`. It intercepts the creation of every JSX element:
1. Checks if `className` prop exists.
2. Checks if `className` is **not** a string (array or object).
3. If so, it processes it with a bundled, lightweight version of `clsx`.
4. Passes the processed props to the original React runtime.
It adds negligible overhead (bytes) and eliminates the need to manually import and call class utilities in every single component file.
## TypeScript Support
This package includes a global augmentation for `React.HTMLAttributes`. Once you set `"jsxImportSource": "clsx-react"` in your `tsconfig.json`, TypeScript will automatically understand that `className` accepts arrays and objects. No extra `.d.ts` configuration needed!
## Guidelines
See [Code of Conduct](./CODE_OF_CONDUCT.md), [Contributing](./CONTRIBUTING.md), and [Security Policy](./SECURITY.md).
## License
MIT License © 2026 [Zsolt Tövis](https://github.com/toviszsolt)
If you find this project useful, please consider [sponsoring me on GitHub](https://github.com/sponsors/toviszsolt), [PayPal](https://www.paypal.com/paypalme/toviszsolt), or [give the repo a star](https://github.com/toviszsolt/clsx-react).