indexclsx
function clsx
import { clsx } from ".";

Examples

Example 1

import { clsx } from "@nick/clsx";

const cn = clsx("foo", "bar", "baz");
//     ^? const cn: "foo bar baz"

Example 2

import { clsx } from "@nick/clsx";

const cn = clsx("foo", { bar: true, baz: false });
//     ^? const cn: "foo bar"

Example 3

import { clsx } from "@nick/clsx";

const cn = clsx("nest", [["deep"], { no: 0 }, [{ yes: 1 }, ["yuh", null]]]);
//     ^? const cn: "nested deep yuh"

Example 4

import { clsx } from "@nick/clsx";

const dark = matchMedia("(prefers-color-scheme: dark)").matches;

const cn1 = clsx("mx-auto", { "text-white": dark, "text-black": !dark });
//     ^? const cn1: "mx-auto text-white" | "mx-auto text-black"

const bgs = ["bg-white", "bg-black"] as const;
const cn2 = clsx("w-1/2", "h-full", bgs[+dark]);
//     ^? const cn2: "w-1/2 h-full bg-white" | "w-1/2 h-full bg-black"

Example 5

import { clsx } from "@nick/clsx";

let foo = "bar"; // <- string, not "bar"

// if a literal type cannot be inferred, it defaults to `string`:
const cn1 = clsx(foo);
//     ^? const cn1: string

// but inferred literals will always be preserved, wherever possible:
const cn2 = clsx("foo", foo);
//     ^? const cn2: `foo ${string}`

Note: the type-level implementation of the clsx function is still considered unstable, and may not alwaus reflect the exact value returned by the clsx function at runtime. If you encounter any issues or other unexpected behavior while using @nick/clsx, please open an issue in the GitHub Repository so it can be addressed and fixed. Thanks!

Type Parameters

T extends ClassValues

Parameters

...classes: [...T]

Return Type

The compiled className string.

Generates a className string from the given class names.

This overload is used when a literal input type cannot be inferred, and the output type defaults to string instead of a more specific literal type.

Parameters

...classes: ClassValues

Return Type

string

The compiled className string.

type alias clsx

The type-level equivalent of the clsx function. This type is used to infer the output string of the clsx function at compile time.

Type Parameters

T

The type of the class names to be compiled.

Fallback = string

Definition

T extends ClassArray ? T["length"] extends 0 ? Fallback : IsValidInput<T, MergeValues<T, Fallback> extends infer S extends string ? S : Fallback, Fallback> : Fallback