Dacă sunteți în căutarea unei biblioteci React care să vă ajute să construiți componente accesibile, sunteți la locul potrivit!

React Aria Components este o bibliotecă care conține o colecție de componente nestilizate construite deasupra cârligelor React Aria.

Este dezvoltat de Adobe și face parte din proiectul React Spectrum, care își propune să creeze un cuprinzător colecție de biblioteci și instrumente care ajută dezvoltatorii să construiască un utilizator adaptabil, accesibil și robust experiențe.

Înțelegerea componentelor React Aria

React Aria Components oferă accesibilitate, interacțiuni ale utilizatorilor și comportament în conformitate cu cele mai bune practici WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Spre deosebire de biblioteca React Aria, care folosește cârlige React pentru a vă construi componentele.

Biblioteca React Aria Components oferă un set de componente prefabricate, inclusiv butoane, casete de selectare, glisoare etc. Aceste componente nu sunt stilate, permițându-vă să proiectați aspectul și senzația aplicației așa cum doriți.

instagram viewer

Beneficiile utilizării componentelor React Aria

Biblioteca React Aria Components oferă multe beneficii, inclusiv:

  • Accesibilitate: Componentele React Aria urmează cele mai bune practici WAI-ARIA, asigurându-se că aplicația dvs. este accesibilă tuturor utilizatorilor, inclusiv celor care folosesc tehnologii de asistență.
  • Flexibilitate: Componentele React Aria vin fără stil, permițându-vă să vă implementați sistemul de proiectare fără constrângeri.
  • Interacțiunile utilizatorului: React Aria oferă o gestionare robustă a interacțiunilor utilizatorului, inclusiv interacțiunile cu tastatură, mouse și atingere.
  • Internaționalizarea: React Aria acceptă limbi de la dreapta la stânga, formatarea datei și numerelor și multe altele, facilitând construirea de aplicații internaționalizate.

Crearea de aplicații React cu componente React Aria

Să parcurgem construirea unei aplicații React simple folosind React Aria Components. Înainte de a utiliza biblioteca React Aria Components în aplicațiile React, trebuie să creați un proiect React. Vite este o modalitate excelentă de a face acest lucru.

Crearea aplicației dvs. React

Pentru a vă crea aplicația React folosind Vite, rulați următorul cod în terminalul dvs.:

npm init vite

Rularea codului de mai sus va lansa o serie de solicitări pentru a vă ajuta să vă creați noul proiect React.

De exemplu:

După crearea proiectului, va trebui să instalați dependențele necesare. Pentru a face acest lucru, rulați următorul cod în terminalul dvs.:

cd react-aria-app
npm install

Acesta va schimba directorul curent în directorul proiectului și apoi va instala dependențele necesare. Odată ce ați creat aplicația React, puteți instala biblioteca React Aria Components pentru a adăuga caracteristici de accesibilitate aplicației dvs.

Instalarea componentelor React Aria

Puteți instala biblioteca React Aria Components folosind npm sau yarn. Pentru a-l instala prin npm, rulați următoarea comandă în terminalul dvs.:

npm install react-aria-components

Alternativ, pentru a instala prin fire, rulați acest cod:

yarn add react-aria-components

Acum că ați instalat biblioteca React Aria Components, puteți utiliza componentele acesteia în aplicația dvs.

Utilizarea componentelor React Aria

Biblioteca React Aria Components oferă o varietate de componente care fac procesul de dezvoltare mai ușor și mai rapid. Pentru a utiliza componenta bibliotecii, importați-o în aplicația dvs. și redați-o.

De exemplu:

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







exportdefault App;

Blocul de cod de mai sus importă Buton, Popover, DialogTrigger, și Dialog componente din react-aria-componente modul. Toate componentele importate creează un buton simplu care afișează un popover când se face clic.

The DialogTrigger componenta controlează vizibilitatea unui dialog sau popover. În interiorul DialogTrigger, există Buton componentă. Acest buton declanșează vizibilitatea Popover și Dialog.

The Popover componenta este un container care apare peste restul interfeței de utilizare, în timp ce Dialog componenta afișează conținutul într-un strat deasupra aplicației. În interiorul Popover componenta este a Dialog componentă cu textul „Ai făcut clic pe buton."

Făcând clic pe butonul, se va afișa un popover cu textul „Ai făcut clic pe butonul” pe ecran, oferind interfeței un aspect similar cu imaginea de mai jos.

După cum puteți vedea în imaginea de mai sus, componentele bibliotecii vin fără stil, astfel încât să puteți alege stilul preferat.

Stilizarea componentelor dvs

Deoarece componentele React Aria vin fără stil, le puteți modela așa cum doriți. Poți să folosești Foi de stil în cascadă (CSS), CSS Tailwind, componente cu stil sau orice altă metodă de stil pe care o preferați.

Puteți trece diferite obiceiuri ClassNames la componente și apoi definiți clasele CSS în fișierul dvs. CSS.

Iată un exemplu:

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







exportdefault App;

În acest exemplu, definiți a numele clasei pentru Buton, Popover, și Dialog componente. Acum puteți stila componentele din fișierul dvs. CSS.

.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;
}

După definirea stilurilor pentru componente, butonul și popover-ul ar trebui să arate cam așa.

Dacă nu doriți să definiți un obicei numele clasei pentru componentele dvs., biblioteca React Aria Components include o versiune implicită numele clasei pentru fiecare componentă. Implicit numele clasei este react-aria-componentName, Unde componentName este numele componentei pe care doriți să o stilați.

De exemplu:

.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;
}

Rețineți că blocul de cod CSS de mai sus va aplica aceste stiluri pentru fiecare Buton, Popover, și Dialog componentă pe care o utilizați în aplicația dvs.

Creați aplicații React accesibile și interactive

React Aria Components este o bibliotecă puternică pentru construirea de aplicații React accesibile și interactive. Oferă componente care gestionează interacțiunile utilizatorului și accesibilitatea conform celor mai bune practici WAI-ARIA. Dacă sunteți în căutarea unei biblioteci de componente care oferă o mulțime de componente și flexibilitate, React Aria Components este o alegere excelentă.

Pe lângă biblioteca React Aria Components, există și alte biblioteci de componente fără stil pe care le puteți folosi pentru a crea aplicații React frumoase. Una dintre aceste biblioteci include Radix UI. Radix UI este o bibliotecă de componente fără stil pentru construirea de aplicații React de înaltă calitate. Este o alternativă excelentă la React Aria Components.