Membuat Reusable Component dengan Menggunakan TailwindCSS dan Classnames di ReactJS

Pranala

Sering kali, ketika kita mengerjakan sebuah website maka kita akan mendapati banyak sekali komponen komponen yang sering sekali untuk digunakan. Misalnya komponen button, container atau card. Kalau pengalamanku, komponen tersebut tidak memiliki logic yang rumit atau malah tidak ada sama sekali.

Permasalahan

Beberapa hari belakangan ini, aku sendiri merasakan sering membuat komponen komponen yang sama ditambah lagi, kira-kira ada tidak sih cara membaut reusable komponen dengan menggunakan TailwindCSS? Apalagi TailwindCSS memiliki nama-nama class yang cukup memudahkan dalam membuat reusable component seperti component button berikut

 <button className='relative bg-blue-500 text-white p-6 rounded text-2xl font-bold overflow-visible'>
      Example button
</button>

Kalau kita lihat, komponen ini bisa di ubah untuk menjadi reusable component dengan memanfaatkan nama kelas dari TailwindCSS. Misalnya apabila kita ingin button primary kita menjadi seperti ini

 <Button bgBlue="500" text="2xl">
      Example button
</Button>

Sehingga kita bisa mengatur button kita bisa reusable dan warna background serta text size bisa berganti sesuai keinginan kita.

Solusi

Menggunakan classnames npm module untuk bisa merubah / mengatur supaya pengaturan class component bisa disesuaikan.

Semula seperti ini

 <button className='relative bg-blue-500 text-white p-6 rounded text-2xl font-bold overflow-visible'>
      Example button
</button>

Menjadi seperti ini

 <Button bgBlue="500" text="2xl">
      Example button
</Button>

Lantas, bagaimana caranya?

Pertama, Install terlebih dahulu classname

npm install classnames --save

Kedua, membuat sebuah komponen button

import React from "react";

const Button = () => {
  return (
    <button
      className= "py-3 lg:py-4 px-12 lg:px-16 text-white-500 font-semibold rounded-lg bg-orange-500 hover:shadow-orange-md transition-all outline-none text-base "
    >
      Button
    </button>
  );
};

export default Button;

Ketiga, kita akan merubah komponen tersebut menjadi lebih usable, bisa digunakan berulang ulang dengan template yang sama. Ini tergantung kebutuhan desain teman-teman. Misalnya, saya memiliki beberapa button dan yang berubah hanya dari segi warna background , text dan font size.

Maka , saya harus import classnames, menambahkannya ke classNames. Lalu, membuat logic untuk font size.

// Button.js
import React from 'react'
import classnames from 'classnames';

const Button = ({ size, bg, text, addClass, children })=> {
  return (
    <button className={classnames(`py-3 lg:py-4 px-12 lg:px-16 text-${text} font-semibold rounded-lg bg-${bg} hover:shadow-orange-md transition-all outline-none ${addClass}`, {
      "text-sm": size === 'sm',
      "text-lg": size === 'lg',
    })}>
      {children}
    </button>
  )
};

export default Button;

Penjelasannya :

1. size merupakan logic bila nilai size sama dengan sm maka nanti class yang ditambahkan adalah text-sm, saat size sama dengan lg maka nanti class yang ditambahkan adalah text-lg. Namun, saat tidak ada maka size akan null dan secara default font size adalah text-base.
2. bg, dan text adalah props yang nantinya menyesuaikan dengan nilai yang didapat. Karena seperti yang saya jelaskan diawal kalau saya hanya perlu mengganti warna dan text saja, sisanya sama semua dari desain.
3. children adalah props untuk mengirimkan semua data yang di "apit" oleh komponen.
4. AddClass kalau saya membutuhkan class tambahan. Misalnya margin atau kelas lain.

Nanti, kurang lebih saat kita memanggil button menjadi seperti ini

import React from "react";
import Button from "../misc/Button";

const DetailJob = () => {
  return (
  <>
  <h2 className="text-3xl">Button</h2>
    <Button size="sm" bg="blue-100" text="white">Submit</Button>
      </>
  );
};

export default DetailJob;

Selesai.

Kesimpulan

Kurang lebih seperti itu cara saya membuat reusable component di ReactJS/NextJS dengan TailwindCSS dan bantuan classnames. Kalau teman-teman ada cara lain, bisa sharing atau berbagi di Twitter / hubungi saya via Twitter.

Dukung saya di Karyakarsa :

Dukung Naufaldi Rafif S di Karyakarsa!

Dukung Naufaldi Rafif S di Karyakarsa!

Sumber Belajar Lain :

Building Reusable React Components Using Tailwind — Smashing Magazine

Tailwind is a popular utility-first CSS framework that provides low-level class names to web developers. In this article, we’ll explore ways to build reusable React components using Tailwind.

More aboutTilo…Smashing Magazine