Dynamically
classnamesinReact
Based on react/jsx-runtime
Using clsx
# via pnpm
$ pnpm i reclsx clsx
# via npm
$ npm i reclsx clsx
# via yarn
$ yarn add reclsx clsxThe constructing className conditionally using lukeed/clsx, For detailed API options, please refer to clsx
// basic
<div className="header navbar" /> // => <div class="header navbar"></div>
// conditionally
<div className={{ 'header': true, 'navbar': false, 'foo': true }} /> // => <div class="header foo"></div>
<div className={[ 'header', { 'navbar': false }, 'content', { 'foo': true } ]} /> // => <div class="header content foo"></div>
<div className={[ 'header', 'navbar', { 'navbar': false }, 'foo' ]} /> // => <div class="header foo"></div>
// dedupe
<div className={[ 'header', 'header', 'foo' ]} /> // => <div class="header foo"></div>Use Reclsx's jsx functions instead of the default jsx-runtime when compiling JSX.
Make the Typescript compiler recognize Reclsx's className types in React.
{
"compilerOptions": {
"jsxImportSource": "reclsx"
}
}// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
jsxImportSource: "reclsx",
}),
],
});Works with Webpack Rollup Taro etc.
// .babelrc
{
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic",
"importSource": "reclsx"
}
]
]
}// via JS
require("esbuild").buildSync({
entryPoints: ["app.jsx"],
bundle: true,
jsxFactory: "jsx",
inject: ['./node_modules/reclsx/dist/jsx-runtime.js'],
outfile: "out.js",
});@babel/preset-react >= v7.9.0
jsxRuntime: "automatic"
LICENSE MIT
Copyright © 2022 Daniel Zhao.