Mengelola ClassName dengan clsx di React

Pelajari cara menggunakan clsx untuk mengelola className secara dinamis di React dengan lebih bersih dan efisien.

2025-03-212 menit baca#clsx #React #CSS

Saat membangun aplikasi React, kita sering perlu menentukan className secara dinamis berdasarkan kondisi tertentu. Library clsx menyederhanakan proses ini dan membuat kode jadi lebih bersih serta mudah dibaca.

Instalasi

Untuk menggunakannya, install terlebih dahulu dengan npm, yarn, atau pnpm:

npm install clsx
# atau
yarn add clsx
# atau
pnpm add clsx

Kamu bisa mempelajari lebih lanjut tentang clsx di repository GitHub resminya: clsx on GitHub

Cara Penggunaan

Dengan clsx, kita bisa mengelola class name secara kondisional tanpa harus menulis kode yang panjang dan berantakan.

Contoh Dasar

import clsx from "clsx";

const Button = ({ primary }: { primary: boolean }) => {
  return (
    <button
      className={clsx("btn", {
        "btn-primary": primary,
        "btn-secondary": !primary,
      })}
    >
      Click me
    </button>
  );
};

Pada contoh ini:

Jika primary bernilai true, className menjadi "btn btn-primary".
Jika primary bernilai false, className menjadi "btn btn-secondary".

Menggabungkan Beberapa Class

Kamu juga bisa menggabungkan class dari berbagai kondisi:

const isActive = true;
const isDisabled = false;

const className = clsx(
  "base-class",
  isActive && "active-class",
  isDisabled ? "disabled-class" : "enabled-class"
);

console.log(className); // Output: "base-class active-class enabled-class"

Menggunakan `clsx` dengan Tailwind CSS

Kalau kamu menggunakan Tailwind CSS, disarankan untuk memakai tailwind-merge bersama clsx agar tidak ada class yang saling konflik:

import { twMerge } from "tailwind-merge";
import clsx from "clsx";

const buttonClass = twMerge(
  clsx("p-4 text-white", isActive && "bg-blue-500", isDisabled && "opacity-50")
);

<button className={buttonClass}>Click me</button>;

Dengan twMerge, class yang saling bertentangan (seperti p-2 dan p-4) akan difilter sehingga hanya class yang paling relevan yang diterapkan.

Kamu bisa mempelajari lebih lanjut tentang tailwind-merge di sini: tailwind-merge on GitHub

Kesimpulan

Menggunakan clsx membantu membuat pengelolaan className jadi lebih bersih dan fleksibel. Kalau kamu menggunakan Tailwind CSS, tailwind-merge sangat direkomendasikan untuk memastikan class tidak saling konflik. Dengan pendekatan ini, kode React kamu jadi lebih terorganisir dan mudah di-maintain.

Kotak percakapan

Tinggalkan jejak sebelum pulang

Instalasi

Cara Penggunaan

Contoh Dasar

Menggabungkan Beberapa Class

Menggunakan clsx dengan Tailwind CSS

Kesimpulan

Memperbaiki Bug 'Ghost Changes' di Bulk Edit Tables

Conditional Rendering: Taruh di Dalam Komponen

Membangun State Machine dengan XState dan Menggunakannya di Berbagai React Components (TypeScript)

Contoh Widget React Grid Layout DnD dan Resizable

Menggunakan `clsx` dengan Tailwind CSS