React Clsx

Dynamically classnames in ReactBased on react/jsx-runtimeUsing clsx

Example

Install

# via pnpm
$ pnpm i react-clsx clsx

# via npm
$ npm i react-clsx clsx

# via yarn
$ yarn add react-clsx clsx

Usage

The 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>

Configure

Use react-clsx's jsx functions instead of the default jsx-runtime when compiling JSX.

TypeScript support(Optional)

Make the Typescript compiler recognize react-clsx's className types in React.

{
  "compilerOptions": {
    "jsxImportSource": "react-clsx"
  }
}

For Vite

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "react-clsx",
    }),
  ],
});

For Babel

Works with Webpack Rollup Taro etc.

// .babelrc
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "react-clsx"
      }
    ]
  ]
}

For Esbuild

// via JS
require("esbuild").buildSync({
  entryPoints: ["app.jsx"],
  bundle: true,
  jsxFactory: "jsx",
  inject: ['./node_modules/react-clsx/dist/jsx-runtime.js'],
  outfile: "out.js",
});

Support

@babel/preset-react >= v7.9.0 jsxRuntime: "automatic"

LICENSE MIT

Copyright © 2022 Daniel Zhao.