Mengelola ClassName dengan clsx di React
Pelajari cara menggunakan clsx untuk mengelola className secara dinamis di React dengan lebih bersih dan efisien.
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 clsxKamu 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
primarybernilaitrue, className menjadi"btn btn-primary". - Jika
primarybernilaifalse, 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.
Tinggalkan komentar