Cara Membuat Library Komponen Sendiri (Gak Pake Ribet)
Pernah gak sih, kamu ngerasa capek bolak-balik nulis kode yang sama di project satu ke project lain? Misalnya tombol, card, atau modal yang desainnya udah standar. Nah, daripada copy-paste terus, mending bikin library komponen sendiri. Iya, beneran. Kamu bisa bikin kumpulan komponen yang tinggal dipasang kayak package npm. Gak harus jadi senior engineer buat ngelakuin ini, kok. Yuk, kita bahas langkah-langkahnya dengan cara santai.
Kenapa sih perlu bikin library sendiri?
Pertama, biar gak repot. Kalau kamu punya beberapa project dengan style yang mirip, library komponen bakal jadi penyelamat. Kedua, konsistensi. Satu komponen diubah, semua project yang pake langsung ikut update. Ketiga, kamu bisa banggain diri sendiri: “Ini lho lib buatan gue.” Lumayan buat nambah portofolio.
Langkah Awal: Siapkan Tools
Kita asumsikan kamu pakai React, karena paling mainstream. Tapi konsepnya sama aja untuk Vue, Angular, atau bahkan vanilla JS.
1. Buat folder project
Kasih nama unik, misalnya `ui-kit-santai`. Terus masuk ke folder itu.
2. Init package.json
Jalankan `npm init -y`. Nanti ada file package.json. Isi `”name”` dengan nama unik biar gak bentrok kalau mau dipublish ke npm. Misal `@namakamu/ui-kit-santai`.
3. Install dependencies
Butuh React sama ReactDOM sebagai peer dependencies (biar gak double bundling). Juga butuh alat bantu untuk build, kayak Rollup atau Vite. Buat pemula, Vite lebih gampang. Install:
“`bash
npm install react react-dom –save-dev
npm install vite @vitejs/plugin-react –save-dev
“`
4. Buat struktur folder
“`
ui-kit-santai/
├── src/
│ ├── components/
│ │ ├── Button.jsx
│ │ └── index.js
│ └── index.js
├── package.json
└── vite.config.js
“`
Mulai Bikin Komponen
Buka `src/components/Button.jsx`. Isi dengan komponen sederhana:
“`jsx
import React from ‘react’;
const Button = ({ children, variant = ‘primary’, …props }) => {
return (
);
};
export default Button;
“`
Selanjutnya, bikin file `src/components/index.js` untuk re-export semua komponen:
“`jsx
export { default as Button } from ‘./Button’;
“`
Lalu `src/index.js` sebagai entry point utama:
“`jsx
export * from ‘./components’;
“`
Konfigurasi Vite
Biar library kita bisa di-build jadi file yang siap pakai (ES modules atau CommonJS), atur `vite.config.js`:
“`js
import { defineConfig } from ‘vite’;
import react from ‘@vitejs/plugin-react’;
export default defineConfig({
plugins: [react()],
build: {
lib: {
entry: ‘src/index.js’,
name: ‘UiKitSantai’,
fileName: (format) => `ui-kit-santai.${format}.js`,
},
rollupOptions: {
external: [‘react’, ‘react-dom’],
output: {
globals: {
react: ‘React’,
‘react-dom’: ‘ReactDOM’,
},
},
},
},
});
“`
Penjelasan: `external` biar React gak ikut dibundel, karena nanti dipasang di project pengguna. `globals` buat fallback kalau mereka pakai script tag.
Build Library
Jalankan `npx vite build`. Kalau berhasil, bakal muncul folder `dist/` berisi file hasil build. Cek `package.json`, tambahkan field `”main”`, `”module”`, dan `”exports”` biar gampang di-import:
“`json
{
“main”: “./dist/ui-kit-santai.umd.js”,
“module”: “./dist/ui-kit-santai.es.js”,
“exports”: {
“.”: {
“import”: “./dist/ui-kit-santai.es.js”,
“require”: “./dist/ui-kit-santai.umd.js”
}
}
}
“`
Uji Coba Lokal
Sebelum publish, uji dulu di project lain. Caranya:
1. Di folder library, jalankan `npm link`.
2. Pindah ke project lain, terus `npm link @namakamu/ui-kit-santai`.
3. Import komponen: `import { Button } from ‘@namakamu/ui-kit-santai’`.
Kalau tombol muncul, berarti sukses. Kalau error, cek lagi konfigurasi.
Tambahin Dokumentasi (Penting!)
Library tanpa dokumentasi itu kayak mie instan tanpa bumbu – gak jelas. Kamu bisa bikin file README.md berisi:
– Cara instalasi
– Contoh penggunaan
– Props yang tersedia
– Screenshot atau contoh live
Atau kalau mau mewah, pakai Storybook. Tapi buat awal, README udah cukup.
Publish ke npm
Daftar dulu di [npmjs.com](https://npmjs.com) kalau belum punya akun. Terus login via terminal:
“`bash
npm login
“`
Setelah login, jalankan:
“`bash
npm publish –access public
“`
Kalau nama package-nya ada yang bentrok, ganti dengan nama lain. Begitu publish, library kamu udah bisa diinstall oleh siapapun (atau kamu sendiri dari project lain) lewat `npm install`.
Tips Tambahan
– Gunakan CSS-in-JS atau CSS Modules biar style gak bocor ke project lain.
– Tambahkan TypeScript kalau mau, biar pengguna dapat autocomplete.
– Tulis test minimal untuk komponen kritis.
– Versioning pakai semantic versioning (major.minor.patch) biar update aman.
– Buat changelog supaya pengguna tahu apa yang berubah.
Kesimpulan
Bikin library komponen sendiri itu gak serumit yang dibayangkan. Modal dasar React, Vite, dan sedikit nekat, kamu udah bisa punya kumpulan komponen yang siap digunakan kapan aja. Mulai dari yang kecil, misalnya cuma tombol sama card, terus kembangkan sesuai kebutuhan. Siapa tahu project kamu bisa dipake tim lain atau bahkan jadi open source yang terkenal.
Jadi, tunggu apa lagi? Buka terminal dan mulai bikin library komponenmu sekarang. Santai aja, yang penting jalan dulu!