Jika Anda mencari perpustakaan React untuk membantu Anda membangun komponen yang dapat diakses, Anda berada di tempat yang tepat!

React Aria Components adalah perpustakaan yang berisi kumpulan komponen tanpa gaya yang dibangun di atas hook React Aria.

Ini dikembangkan oleh Adobe dan merupakan bagian dari proyek React Spectrum, yang bertujuan untuk menciptakan sistem yang komprehensif kumpulan perpustakaan dan alat yang membantu pengembang membangun pengguna yang adaptif, mudah diakses, dan tangguh pengalaman.

Memahami Komponen React Aria

Bereaksi Komponen Aria menyediakan aksesibilitas, interaksi pengguna, dan perilaku sesuai dengan praktik terbaik WAI-ARIA (Inisiatif Aksesibilitas Web - Aplikasi Internet Kaya yang Dapat Diakses). Berbeda dengan perpustakaan React Aria yang menggunakan kait React untuk membangun komponen Anda.

Pustaka React Aria Components menawarkan serangkaian komponen yang sudah dibuat sebelumnya, termasuk tombol, kotak centang, bilah geser, dll. Komponen-komponen ini tidak diberi gaya, sehingga Anda dapat mendesain tampilan dan nuansa aplikasi sesuai keinginan Anda.

instagram viewer

Manfaat Menggunakan Komponen React Aria

Pustaka React Aria Components menawarkan banyak manfaat, termasuk:

  • Aksesibilitas: Komponen React Aria mengikuti praktik terbaik WAI-ARIA, memastikan aplikasi Anda dapat diakses oleh semua pengguna, termasuk mereka yang menggunakan teknologi pendukung.
  • Fleksibilitas: Komponen React Aria hadir tanpa gaya, memungkinkan Anda mengimplementasikan sistem desain Anda tanpa kendala.
  • Interaksi Pengguna: React Aria memberikan penanganan interaksi pengguna yang kuat, termasuk interaksi keyboard, mouse, dan sentuhan.
  • Penginternasionalan: React Aria mendukung bahasa kanan-ke-kiri, format tanggal dan angka, dan banyak lagi, sehingga memudahkan pembuatan aplikasi internasional.

Membangun Aplikasi React Dengan Komponen React Aria

Mari kita mulai membangun aplikasi React sederhana menggunakan React Aria Components. Sebelum menggunakan pustaka React Aria Components di aplikasi React Anda, Anda harus membuat proyek React. Vite adalah cara terbaik untuk melakukan ini.

Membuat Aplikasi React Anda

Untuk membuat aplikasi React Anda menggunakan Vite, jalankan kode berikut di terminal Anda:

npm init vite

Menjalankan kode di atas akan meluncurkan serangkaian perintah untuk membantu Anda membuat proyek React baru Anda.

Misalnya:

Setelah membuat proyek, Anda perlu menginstal dependensi yang diperlukan. Untuk melakukan ini, jalankan kode berikut di terminal Anda:

cd react-aria-app
npm install

Ini akan mengubah direktori Anda saat ini ke direktori proyek dan kemudian menginstal dependensi yang diperlukan. Setelah Anda membuat aplikasi React, Anda dapat menginstal pustaka React Aria Components untuk menambahkan fitur aksesibilitas ke aplikasi Anda.

Menginstal Komponen React Aria

Anda dapat menginstal perpustakaan React Aria Components menggunakan npm atau benang. Untuk menginstalnya melalui npm, jalankan perintah berikut di terminal Anda:

npm install react-aria-components

Alternatifnya, untuk menginstal melalui benang, jalankan kode ini:

yarn add react-aria-components

Sekarang Anda telah menginstal pustaka React Aria Components, Anda dapat menggunakan komponen-komponennya dalam aplikasi Anda.

Menggunakan Komponen React Aria

Pustaka React Aria Components menawarkan berbagai komponen yang membuat proses pengembangan lebih mudah dan cepat. Untuk menggunakan komponen perpustakaan, impor ke aplikasi Anda dan render.

Misalnya:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (







exportdefault App;

Blok kode di atas mengimpor Tombol, Popover, Pemicu Dialog, Dan Dialog komponen dari komponen reaksi-aria modul. Semua komponen yang diimpor membuat tombol sederhana yang menampilkan popover ketika diklik.

Itu Pemicu Dialog komponen mengontrol visibilitas dialog atau popover. Di dalam Pemicu Dialog, ada Tombol komponen. Tombol ini memicu visibilitas Popover Dan Dialog.

Itu Popover komponen adalah wadah yang muncul di seluruh UI, sedangkan Dialog komponen menampilkan konten pada lapisan di atas aplikasi. Di dalam Popover komponen adalah a Dialog komponen dengan teks "Kamu menekan tombolnya."

Mengklik tombol akan menampilkan popover dengan teks "Kamu mengklik tombolnya" di layar Anda, memberikan antarmuka Anda tampilan yang mirip dengan gambar di bawah.

Seperti yang Anda lihat pada gambar di atas, komponen perpustakaan tidak diberi gaya sehingga Anda dapat memilih gaya yang Anda inginkan.

Menata Komponen Anda

Karena Komponen React Aria tidak diberi gaya, Anda dapat menatanya sesuka Anda. Anda dapat gunakan Lembar Gaya Bertingkat (CSS), Tailwind CSS, komponen gaya, atau metode gaya lainnya yang Anda sukai.

Anda dapat melewati kebiasaan yang berbeda nama kelas ke komponen dan kemudian tentukan kelas CSS di file CSS Anda.

Berikut ini contohnya:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (







exportdefault App;

Dalam contoh ini, Anda mendefinisikan a nama kelas Untuk Tombol, Popover, Dan Dialog komponen. Anda sekarang dapat menata gaya komponen dalam file CSS Anda.

.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}

Setelah menentukan gaya untuk komponen Anda, tombol dan popover Anda akan terlihat seperti ini.

Jika Anda tidak ingin mendefinisikan kebiasaan nama kelas untuk komponen Anda, pustaka React Aria Components menyertakan default nama kelas untuk setiap komponen. Standarnya nama kelas adalah reaksi-aria-componentName, Di mana nama komponen adalah nama komponen yang ingin Anda gaya.

Misalnya:

.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}

Perhatikan bahwa blok kode CSS di atas akan menerapkan gaya ini ke semua Tombol, Popover, Dan Dialog komponen yang Anda gunakan dalam aplikasi Anda.

Bangun Aplikasi React yang Mudah Diakses dan Interaktif

React Aria Components adalah perpustakaan yang kuat untuk membangun aplikasi React yang mudah diakses dan interaktif. Ini menyediakan komponen yang menangani interaksi dan aksesibilitas pengguna sesuai dengan praktik terbaik WAI-ARIA. Jika Anda mencari pustaka komponen yang menawarkan banyak komponen dan fleksibilitas, React Aria Components adalah pilihan yang sangat baik.

Selain pustaka React Aria Components, terdapat pustaka komponen tanpa gaya lainnya yang dapat Anda gunakan untuk membangun aplikasi React yang indah. Salah satu perpustakaan ini menyertakan Radix UI. Radix UI adalah pustaka komponen tanpa gaya untuk membangun aplikasi React berkualitas tinggi. Ini adalah alternatif yang bagus untuk React Aria Components.