A simple replacement for clsx you may not actually need (see the benchmark)
Used to construct class conditionally with strings, arrays and key-value objects.
Developed as a case study, Bun friendly. 🌿
- 🚀 Unnecessarily fast (~20M ops/s)
- 🎯 Same functionality and API of clsx
- 👑 Modern ESM syntax
- 💎 Zero dependencies
- ☀️ No "lite" mode (simply doesn't make any sense)
- 🎈 Only 277B (~190B compressed)
- 🐳 Deeply typed and tested
- 🚨 Experimental WASM variant (for research purposes, do not use it)
bun add klsxor with npm:
npm install klsximport { klsx } from 'klsx'
klsx('foo', 'bar', 'baz')
// => "foo bar baz"
klsx({ foo: 'string', bar: true, bux: null }, 'baz')
// => "foo bar baz"
klsx(['foo', ['bar', true && 'baz']])
// => "foo bar baz"or importing the short alias kx:
import React, { useState } from 'react'
import { kx } from 'klsx'
const MyComponent = () => {
const [isActive, setIsActive] = useState(false)
return (
<div>
<div className={kx('base-class', isActive ? 'active' : 'inactive')}>
{/* ... */}
</div>
<div className={kx('base-class', { active: isActive, inactive: !isActive })}>
{/* ... */}
</div>
<div
className={kx('base-class', [isActive && 'active', !isActive && 'inactive'])}
>
{/* ... */}
</div>
</div>
)
}Just replace every c with a k, as in the example below.
From:
// clsx
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}To:
// KLSX
import { klsx, type KlassValue } from 'klsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: KlassValue[]) {
return twMerge(klsx(inputs))
}- Install the Tailwind CSS IntelliSense extension:
code --install-extension bradlc.vscode-tailwindcss- Update your
settings.jsonconfiguration with:
{
"tailwindCSS.classFunctions": ["klsx", "kx"]
}- Install the prettier-plugin-tailwindcss plugin:
bun add -D prettier prettier-plugin-tailwindcss- Update your
prettier.config.jsconfiguration to handleklsx:
/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
export default {
plugins: ['prettier-plugin-tailwindcss'],
tailwindFunctions: ['klsx', 'kx'],
}- Install the eslint-plugin-clsx plugin:
bun add -D eslint eslint-plugin-clsx- Update your
eslint.config.jsconfiguration to handleklsx:
import { defineConfig } from 'eslint/config'
import clsx from 'eslint-plugin-clsx'
export default defineConfig({
plugins: { clsx },
settings: {
clsxOptions: {
klsx: ['default', 'klsx', 'kx'],
},
},
})Install dependencies:
bun installBuild dist files:
bun run buildRun test suite:
bun testRun benchmark suite:
bun bench