Wenn Sie nach einer React-Bibliothek suchen, die Sie beim Erstellen barrierefreier Komponenten unterstützt, sind Sie hier richtig!

React Aria Components ist eine Bibliothek, die eine Sammlung unformatierter Komponenten enthält, die auf React Aria-Hooks basieren.

Es wurde von Adobe entwickelt und ist Teil des React Spectrum-Projekts, das darauf abzielt, eine umfassende Lösung zu schaffen Sammlung von Bibliotheken und Tools, die Entwicklern dabei helfen, anpassungsfähige, zugängliche und robuste Benutzer zu erstellen Erfahrungen.

React Aria-Komponenten verstehen

React Aria-Komponenten Bietet Barrierefreiheit, Benutzerinteraktionen und Verhalten gemäß den Best Practices von WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Im Gegensatz zur React Aria-Bibliothek, die verwendet React-Hooks um Ihre Komponenten zu bauen.

Die React Aria Components-Bibliothek bietet eine Reihe vorgefertigter Komponenten, darunter Schaltflächen, Kontrollkästchen, Schieberegler usw. Diese Komponenten sind nicht gestylt, sodass Sie das Erscheinungsbild der Anwendung nach Ihren Wünschen gestalten können.

instagram viewer

Vorteile der Verwendung von React Aria-Komponenten

Die React Aria Components-Bibliothek bietet viele Vorteile, darunter:

  • Barrierefreiheit: React Aria-Komponenten folgen den Best Practices von WAI-ARIA und stellen sicher, dass Ihre Anwendung für alle Benutzer zugänglich ist, auch für diejenigen, die unterstützende Technologien verwenden.
  • Flexibilität: React Aria-Komponenten werden ohne Stil geliefert, sodass Sie Ihr Designsystem ohne Einschränkungen implementieren können.
  • Benutzerinteraktionen: React Aria bietet eine robuste Handhabung von Benutzerinteraktionen, einschließlich Tastatur-, Maus- und Touch-Interaktionen.
  • Internationalisierung: React Aria unterstützt Rechts-nach-Links-Sprachen, Datums- und Zahlenformatierung und mehr und erleichtert so die Erstellung internationalisierter Anwendungen.

Erstellen von React-Apps mit React Aria-Komponenten

Lassen Sie uns durch die Erstellung einer einfachen React-Anwendung mit React Aria Components gehen. Bevor Sie die React Aria Components-Bibliothek in Ihren React-Anwendungen verwenden, müssen Sie ein React-Projekt erstellen. Vite ist eine großartige Möglichkeit, dies zu tun.

Erstellen Sie Ihre Reaktionsanwendung

Um Ihre React-Anwendung mit Vite zu erstellen, führen Sie den folgenden Code in Ihrem Terminal aus:

npm init vite

Wenn Sie den obigen Code ausführen, werden eine Reihe von Eingabeaufforderungen gestartet, die Ihnen bei der Erstellung Ihres neuen React-Projekts helfen.

Zum Beispiel:

Nachdem Sie Ihr Projekt erstellt haben, müssen Sie die erforderlichen Abhängigkeiten installieren. Führen Sie dazu den folgenden Code in Ihrem Terminal aus:

cd react-aria-app
npm install

Es ändert Ihr aktuelles Verzeichnis in das Projektverzeichnis und installiert dann die erforderlichen Abhängigkeiten. Sobald Sie Ihre React-Anwendung erstellt haben, können Sie die React Aria Components-Bibliothek installieren, um Ihrer Anwendung Eingabehilfen hinzuzufügen.

Installieren von React Aria-Komponenten

Sie können die React Aria Components-Bibliothek mit npm oder Yarn installieren. Um es über npm zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install react-aria-components

Alternativ können Sie zur Installation über Garn diesen Code ausführen:

yarn add react-aria-components

Nachdem Sie nun die React Aria Components-Bibliothek installiert haben, können Sie deren Komponenten in Ihrer Anwendung verwenden.

Verwenden der React Aria-Komponenten

Die React Aria Components-Bibliothek bietet eine Vielzahl von Komponenten, die den Entwicklungsprozess einfacher und schneller machen. Um die Komponente der Bibliothek zu verwenden, importieren Sie sie in Ihre Anwendung und rendern Sie sie.

Zum Beispiel:

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







exportdefault App;

Der obige Codeblock importiert die Taste, Popover, DialogTrigger, Und Dialog Komponenten aus der React-Aria-Komponenten Modul. Alle importierten Komponenten erstellen eine einfache Schaltfläche, die beim Klicken ein Popover anzeigt.

Der DialogTrigger Die Komponente steuert die Sichtbarkeit eines Dialogs oder Popovers. Im Inneren DialogTrigger, dort ist der Taste Komponente. Diese Schaltfläche löst die Sichtbarkeit des aus Popover Und Dialog.

Der Popover Komponente ist ein Container, der über dem Rest der Benutzeroberfläche angezeigt wird, während die Dialog Die Komponente zeigt Inhalte in einer Ebene über der App an. Im Inneren Popover Komponente ist ein Dialog Komponente mit dem Text „Du hast auf den Button geklickt."

Wenn Sie auf die Schaltfläche klicken, wird ein Popover mit dem Text angezeigt „Sie haben auf die Schaltfläche geklickt“ auf Ihrem Bildschirm und verleiht Ihrer Benutzeroberfläche ein ähnliches Aussehen wie im Bild unten.

Wie Sie im Bild oben sehen können, sind die Komponenten der Bibliothek nicht gestylt, sodass Sie Ihren bevorzugten Stil wählen können.

Gestalten Sie Ihre Komponenten

Da die React Aria-Komponenten nicht gestylt sind, können Sie sie nach Ihren Wünschen gestalten. Sie können verwenden Cascading Style Sheets (CSS), Tailwind CSS, styled-components oder jede andere von Ihnen bevorzugte Styling-Methode.

Sie können verschiedene Bräuche übergeben Klassennamen zu den Komponenten und definieren Sie dann die CSS-Klassen in Ihrer CSS-Datei.

Hier ist ein Beispiel:

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







exportdefault App;

In diesem Beispiel definieren Sie a Klassenname für die Taste, Popover, Und Dialog Komponenten. Sie können jetzt die Komponenten in Ihrer CSS-Datei formatieren.

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

Nachdem Sie die Stile für Ihre Komponenten definiert haben, sollten Ihre Schaltfläche und Ihr Popover in etwa so aussehen.

Wenn Sie keinen Benutzerdefiniert definieren möchten Klassenname Für Ihre Komponenten enthält die React Aria Components-Bibliothek einen Standard Klassenname für jede Komponente. Der Standard Klassenname Ist React-Aria-Komponentenname, Wo Komponentenname ist der Name der Komponente, die Sie formatieren möchten.

Zum Beispiel:

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

Beachten Sie, dass der obige CSS-Codeblock diese Stile auf alle anwendet Taste, Popover, Und Dialog Komponente, die Sie in Ihrer Anwendung verwenden.

Erstellen Sie barrierefreie und interaktive Reaktionsanwendungen

React Aria Components ist eine leistungsstarke Bibliothek zum Erstellen zugänglicher und interaktiver React-Anwendungen. Es stellt Komponenten bereit, die Benutzerinteraktionen und Zugänglichkeit gemäß den Best Practices von WAI-ARIA handhaben. Wenn Sie nach einer Komponentenbibliothek suchen, die viele Komponenten und Flexibilität bietet, ist React Aria Components eine ausgezeichnete Wahl.

Neben der React Aria-Komponentenbibliothek gibt es weitere unformatierte Komponentenbibliotheken, mit denen Sie schöne React-Anwendungen erstellen können. Eine dieser Bibliotheken umfasst Radix UI. Radix UI ist eine unformatierte Komponentenbibliothek zum Erstellen hochwertiger React-Apps. Es ist eine großartige Alternative zu React Aria Components.