clsx-react 0.9.3 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -19
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](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)
|
|
4
|
+
|
|
5
|
+
# `clsx-react` - JSX Super Power for `className`
|
|
4
6
|
|
|
5
7
|
**Stop importing `clsx` or `classnames` manually.**
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
`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.
|
|
8
10
|
|
|
9
11
|
## The Problem
|
|
10
12
|
|
|
13
|
+
You need conditional class names in your React components, but importing and using `clsx` or `classnames` everywhere leads to repetitive boilerplate code.
|
|
14
|
+
|
|
11
15
|
```jsx
|
|
12
16
|
// ❌ Old way: Boilerplate everywhere
|
|
13
17
|
import clsx from 'clsx'; // or classnames
|
|
@@ -19,6 +23,8 @@ export const Button = ({ active, disabled }) => (
|
|
|
19
23
|
|
|
20
24
|
## The Solution
|
|
21
25
|
|
|
26
|
+
No more imports or boilerplate. Just use arrays and objects directly in `className`. Strings still work as usual.
|
|
27
|
+
|
|
22
28
|
```jsx
|
|
23
29
|
// ✅ New way: Zero imports, native syntax
|
|
24
30
|
export const Button = ({ active, disabled }) => (
|
|
@@ -26,8 +32,6 @@ export const Button = ({ active, disabled }) => (
|
|
|
26
32
|
);
|
|
27
33
|
```
|
|
28
34
|
|
|
29
|
-
---
|
|
30
|
-
|
|
31
35
|
## Installation
|
|
32
36
|
|
|
33
37
|
```bash
|
|
@@ -40,13 +44,11 @@ pnpm add clsx-react
|
|
|
40
44
|
|
|
41
45
|
> **Note:** Requires `react` >= 17.0.0.
|
|
42
46
|
|
|
43
|
-
---
|
|
44
|
-
|
|
45
47
|
## Configuration
|
|
46
48
|
|
|
47
|
-
To make this work, you need to tell your compiler to use this package as the JSX Import Source instead of the default `react`.
|
|
49
|
+
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.
|
|
48
50
|
|
|
49
|
-
### 1. TypeScript (`tsconfig.json`) - **Recommended**
|
|
51
|
+
### 1. TypeScript (`tsconfig.json`) / JavaScript (`jsconfig.json`) - **Recommended**
|
|
50
52
|
|
|
51
53
|
This handles both the compilation and the type definitions (so TS won't complain about arrays in `className`).
|
|
52
54
|
|
|
@@ -59,7 +61,9 @@ This handles both the compilation and the type definitions (so TS won't complain
|
|
|
59
61
|
}
|
|
60
62
|
```
|
|
61
63
|
|
|
62
|
-
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
### 2. Vite (`vite.config.ts`) / Esbuild
|
|
63
67
|
|
|
64
68
|
If you are using Vite, you can set it explicitly in the config:
|
|
65
69
|
|
|
@@ -75,12 +79,32 @@ export default defineConfig({
|
|
|
75
79
|
});
|
|
76
80
|
```
|
|
77
81
|
|
|
78
|
-
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
### 3. Next.js / SWC / Turbopack
|
|
79
85
|
|
|
80
|
-
Next.js usually respects `tsconfig.json`. Ensure your `compilerOptions` are set as shown in step 1.
|
|
86
|
+
Next.js usually respects `tsconfig.json` or `jsconfig.json`. Ensure your `compilerOptions` are set as shown in step 1.
|
|
81
87
|
|
|
82
88
|
---
|
|
83
89
|
|
|
90
|
+
### 4. Babel / Webpack
|
|
91
|
+
|
|
92
|
+
If you are using Babel, you can set the `jsxImportSource` in your Babel config:
|
|
93
|
+
|
|
94
|
+
```json
|
|
95
|
+
{
|
|
96
|
+
"presets": [
|
|
97
|
+
[
|
|
98
|
+
"@babel/preset-react",
|
|
99
|
+
{
|
|
100
|
+
"runtime": "automatic",
|
|
101
|
+
"importSource": "clsx-react"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
84
108
|
## Usage Examples
|
|
85
109
|
|
|
86
110
|
Once configured, you can use `className` just like you would use the `clsx` function arguments.
|
|
@@ -109,8 +133,6 @@ Once configured, you can use `className` just like you would use the `clsx` func
|
|
|
109
133
|
<div className="just-a-string">...</div>
|
|
110
134
|
```
|
|
111
135
|
|
|
112
|
-
---
|
|
113
|
-
|
|
114
136
|
## How it works
|
|
115
137
|
|
|
116
138
|
This package wraps the standard `react/jsx-runtime` and `react/jsx-dev-runtime`. It intercepts the creation of every JSX element:
|
|
@@ -122,20 +144,16 @@ This package wraps the standard `react/jsx-runtime` and `react/jsx-dev-runtime`.
|
|
|
122
144
|
|
|
123
145
|
It adds negligible overhead (bytes) and eliminates the need to manually import and call class utilities in every single component file.
|
|
124
146
|
|
|
125
|
-
---
|
|
126
|
-
|
|
127
147
|
## TypeScript Support
|
|
128
148
|
|
|
129
149
|
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!
|
|
130
150
|
|
|
131
|
-
---
|
|
132
|
-
|
|
133
151
|
## Guidelines
|
|
134
152
|
|
|
135
153
|
See [Code of Conduct](./CODE_OF_CONDUCT.md), [Contributing](./CONTRIBUTING.md), and [Security Policy](./SECURITY.md).
|
|
136
154
|
|
|
137
155
|
## License
|
|
138
156
|
|
|
139
|
-
MIT License ©
|
|
157
|
+
MIT License © 2026 [Zsolt Tövis](https://github.com/toviszsolt)
|
|
140
158
|
|
|
141
159
|
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).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "clsx-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Custom React JSX Runtime to support arrays and objects in className prop natively.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"url": "https://www.paypal.com/paypalme/toviszsolt"
|
|
51
51
|
}
|
|
52
52
|
],
|
|
53
|
-
"homepage": "https://
|
|
53
|
+
"homepage": "https://codesandbox.io/p/devbox/broken-fog-m82g3j?file=%2Fapp%2Flayout.tsx%3A1%2C1",
|
|
54
54
|
"repository": {
|
|
55
55
|
"type": "git",
|
|
56
56
|
"url": "git+https://github.com/toviszsolt/clsx-react.git"
|