4 Pustaka Komponen Tanpa Gaya Terbaik untuk Membuat Aplikasi React yang Dapat Disesuaikan

Anda dapat menggunakan pustaka komponen yang menyediakan elemen bergaya yang telah dibuat sebelumnya untuk menyederhanakan proses pengembangan aplikasi React. Pustaka ini dapat menghemat banyak waktu dan tenaga, namun juga dapat membatasi kendali Anda terhadap gaya aplikasi Anda. Jika Anda memerlukan kontrol lebih besar terhadap gaya aplikasi React Anda, pertimbangkan untuk menggunakan pustaka komponen tanpa gaya.

Apa itu Pustaka Komponen Tanpa Gaya?

Komponen tanpa gaya perpustakaan digunakan untuk mengembangkan aplikasi React yang dapat diakses. Ini adalah kumpulan komponen UI yang dapat digunakan kembali tanpa gaya yang telah ditentukan sebelumnya. Mereka memberi Anda struktur dasar elemen UI tanpa gaya apa pun. Ini memberi Anda kendali penuh atas tampilan dan nuansa komponen Anda.

Manfaat Perpustakaan Komponen Tanpa Gaya

Berikut beberapa keuntungan menggunakan pustaka komponen tanpa gaya:

• Kontrol penuh atas gaya: Pustaka komponen tanpa gaya memberi Anda kendali penuh atas tampilan komponen Anda. Anda dapat menggunakan CSS atau kerangka gaya apa pun untuk menyesuaikan komponen agar sesuai dengan kebutuhan Anda.
• Mempercepat pembangunan: Pustaka komponen tanpa gaya dapat membantu Anda mempercepat pengembangan dengan menyediakan sekumpulan komponen siap pakai yang dapat Anda gunakan di aplikasi Anda.
• Mudah dirawat: Pustaka komponen tanpa gaya mudah dipelihara karena tidak digabungkan secara erat dengan kerangka gaya tertentu. Artinya, Anda dapat dengan mudah memperbarui gaya tanpa membuat perubahan pada kode yang mendasarinya.

Radix UI adalah pustaka komponen tanpa gaya yang berfokus pada aksesibilitas. Ini menyediakan serangkaian komponen UI yang dirancang agar dapat diakses oleh semua pengguna. Kamu bisa membangun aplikasi React yang indah menggunakan Radix UI.

Saat bekerja dengan Radix UI, Anda dapat menginstal masing-masing komponen yang Anda butuhkan, bukan seluruh perpustakaan. Ini memastikan aplikasi Anda tetap ringan.

Misalnya, jika Anda hanya memerlukan komponen akordeon, Anda dapat menginstalnya di aplikasi Anda dengan menjalankan perintah berikut:

npm install @radix-ui/react-accordion

Setelah menginstal komponen akordeon, Anda dapat membuat akordeon di aplikasi React Anda.

Berikut ini contoh cara menggunakan komponen akordeon:

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

Blok kode di atas menyiapkan komponen dasar akordeon tanpa gaya menggunakan @radix-ui/react-accordion perpustakaan, memungkinkan item yang dapat dilipat dengan konten yang dapat disesuaikan.

Kode tersebut akan menghasilkan akordeon yang terlihat seperti ini:

Pustaka React Aria adalah sekumpulan kait untuk membangun antarmuka pengguna di React. Perpustakaan mempermudah pembuatan aplikasi web yang dapat diakses dengan menyediakan kumpulan komponen yang mengikuti praktik terbaik untuk aksesibilitas.

Adobe mengembangkan dan memelihara perpustakaan React Aria. Perpustakaan adalah bagian dari Sistem Desain Adobe Spectrum yang lebih luas, yang menyediakan serangkaian pedoman desain dan sumber daya yang komprehensif untuk membangun antarmuka pengguna yang dapat diakses. Elemen yang disediakan oleh perpustakaan React Aria tidak diberi gaya, sehingga Anda dapat menyesuaikan elemen agar sesuai dengan kebutuhan Anda.

Untuk menggunakan React Aria di aplikasi React Anda, instal dengan menjalankan perintah berikut:

npm install react-aria

Berikut adalah contoh cara membuat komponen tombol menggunakan gunakanTombol kait:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

Sekarang Anda dapat mengimpor dan merender tombol komponen di komponen lain yang Anda pilih.

Misalnya:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

Ketika Anda merender blok kode di atas, maka akan menghasilkan tombol sederhana yang terlihat seperti ini:

Jika Anda merasa tidak nyaman menggunakan React Aria karena pengaitnya, gunakan Bereaksi Komponen Aria perpustakaan sebagai gantinya. Pustaka ini menyediakan komponen bawaan yang dapat diakses secara default. Ini adalah lapisan tipis di atas perpustakaan React Aria. Komponen yang disediakan tidak diberi gaya, sehingga kedua perpustakaan tersebut sangat mirip.

Base UI adalah pustaka React UI tanpa gaya yang menyediakan komponen UI tanpa gaya. Tim Material UI membuat Base UI dengan serangkaian komponen dasar yang dapat Anda gunakan untuk membangun aplikasi React kustom Anda sendiri. Mereka mendasarkan perpustakaan Base UI pada hal yang sama rekayasa yang kuat sebagai Material UI, namun Base UI tidak mengimplementasikan Desain Material.

Anda dapat menginstal Base UI di aplikasi React Anda dengan perintah ini:

npm install @mui/base

Base UI menyediakan komponen saat bepergian, artinya Anda bisa langsung mengimpor dan menggunakan komponen dari perpustakaan. Ini juga menyediakan kait yang dapat Anda gunakan untuk membuat dan mengonfigurasi komponen Anda.

Berikut ini contoh penggunaan komponen Base UI:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

Kode ini menghasilkan tombol sederhana menggunakan Tombol komponen perpustakaan Base UI. Anda juga dapat menggunakan gunakanTombol kait untuk melakukan tugas yang sama.

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

Itu gunakanTombol kait dan itu Tombol komponen akan menghasilkan tombol tanpa gaya, seperti yang ditunjukkan pada gambar di bawah.

Pustaka lain yang dapat Anda jelajahi adalah Headless UI, yang menawarkan elemen UI tanpa gaya, memberi Anda kebebasan untuk menyesuaikan tampilan dan perilaku komponen UI sesuai keinginan Anda.

Anda dapat menginstal perpustakaan menggunakan perintah berikut:

npm install @headlessui/react

Setelah menginstal perpustakaan, Anda dapat menggunakan beberapa komponen yang disediakan perpustakaan di aplikasi React Anda.

Misalnya:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

Dalam contoh ini, Anda membuat popover menggunakan Popover komponen dari perpustakaan UI Headless. Blok kode di atas akan menghasilkan popover seperti ini.

Dapatkan Kontrol Penuh Dengan Komponen Tanpa Gaya

Pustaka komponen tanpa gaya memberi Anda kendali penuh atas gaya aplikasi React Anda, memungkinkan Anda menciptakan pengalaman pengguna yang unik. Perpustakaan ini menawarkan berbagai opsi untuk memenuhi kebutuhan Anda. Anda dapat membuat aplikasi React yang menarik secara visual dan dapat disesuaikan dengan memanfaatkan perpustakaan yang disebutkan di atas.