clsx

一个用于有条件地构建 className 字符串的微型（239B）工具。
同时作为 classnames 模块的更快和更小的直接替代品。

该模块提供三种格式：

• ES模块：dist/clsx.mjs
• CommonJS：dist/clsx.js
• UMD：dist/clsx.min.js

安装

$ npm install --save clsx

使用

import clsx from 'clsx';
// 或
import { clsx } from 'clsx';

// 字符串（可变参数）
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// 对象
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// 对象（可变参数）
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// 数组
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// 数组（可变参数）
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// 混合使用（包含嵌套）
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

API

clsx(...input)

返回：String

input

类型：Mixed

clsx 函数可以接受任意数量的参数，每个参数可以是对象、数组、布尔值或字符串。

**重要：**所有假值都会被丢弃！
单独的布尔值也会被丢弃。

clsx(true, false, '', null, undefined, 0, NaN);
//=> ''

模式

clsx 提供多个"版本"，让你只引入所需的功能！

clsx

大小（gzip）： 239 字节
可用性： CommonJS、ES模块、UMD

默认的 clsx 模块；详见 API。

import { clsx } from 'clsx';
// 或
import clsx from 'clsx';

clsx/lite

大小（gzip）： 140 字节
可用性： CommonJS、ES模块
**注意：**仅接受字符串参数！

适用于仅使用字符串构建模式的应用。

任何非字符串参数都会被忽略！

import { clsx } from 'clsx/lite';
// 或
import clsx from 'clsx/lite';

// 字符串
clsx('hello', true && 'foo', false && 'bar');
// => "hello foo"

// 注意：任何非字符串输入都会被忽略
clsx({ foo: true });
//=> ""

性能基准

有关跨浏览器结果的快照，请查看 bench 目录！

支持

支持所有版本的Node.js。

支持所有支持 Array.isArray 的浏览器（IE9+）。

**注意：**对于IE8及更早版本的支持，请安装 clsx@1.0.x 并注意 #17。

Tailwind 支持

以下是一些额外的（可选）步骤，用于启用使用 clsx 和 Tailwind CSS 的类自动完成。

 {
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
 }

在 Tailwind 环境中，你可能会发现 clsx/lite 模块很有用。特别是当你的应用仅以这种模式组合类时：

clsx('text-base', props.active && 'text-primary', props.className);

相关

• obj-str - 一个更小（96B）且类似的工具，仅适用于对象。

许可

MIT © Luke Edwards