jamsrui_utils_cn_clsx_classname_merging_quickstart.ts

1import { cn, clsx, type ClassValue } from "@jamsrui/utils";
2
3/**
4 * Example 1: Using cn (Tailwind Merge + Clsx)
5 * Merges class names and handles Tailwind CSS conflicts efficiently.
6 */
7const buttonClasses = cn(
8  "px-2 py-1 bg-red-500",
9  "p-4 bg-blue-500", // Overrides previous padding and background
10  { "opacity-50": false },
11  null,
12  undefined
13);
14
15console.log(buttonClasses); 
16// Output: "p-4 bg-blue-500"
17
18/**
19 * Example 2: Using clsx
20 * Constructing conditional className strings.
21 */
22const isActive = true;
23const sidebarClasses = clsx("base-style", isActive && "active-style", !isActive && "hidden");
24
25console.log(sidebarClasses);
26// Output: "base-style active-style"
27
28/**
29 * Example 3: Type Usage
30 * Defining a component prop that accepts class values.
31 */
32interface MyComponentProps {
33  className?: ClassValue;
34}
35
36const MyComponent = ({ className }: MyComponentProps) => {
37  return cn("default-element-style", className);
38};