import { clsx } from ".";
Examples
▶Example 1
Example 1
import { clsx } from "@nick/clsx"; const cn = clsx("foo", "bar", "baz"); // ^? const cn: "foo bar baz"
▶Example 2
Example 2
import { clsx } from "@nick/clsx"; const cn = clsx("foo", { bar: true, baz: false }); // ^? const cn: "foo bar"
▶Example 3
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
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
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!
Parameters
...classes: [...T]