Se você está procurando uma biblioteca React para ajudá-lo a construir componentes acessíveis, você está no lugar certo!

Componentes React Aria é uma biblioteca que contém uma coleção de componentes sem estilo construídos sobre ganchos React Aria.

É desenvolvido pela Adobe e faz parte do projeto React Spectrum, que visa criar um ambiente abrangente coleção de bibliotecas e ferramentas que ajudam os desenvolvedores a criar usuários adaptáveis, acessíveis e robustos. experiências.

Compreendendo os componentes do React Aria

Componentes do React Aria fornece acessibilidade, interações do usuário e comportamento de acordo com as práticas recomendadas WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Ao contrário da biblioteca React Aria, que usa ganchos React para construir seus componentes.

A biblioteca React Aria Components oferece um conjunto de componentes pré-construídos, incluindo botões, caixas de seleção, controles deslizantes, etc. Esses componentes não são estilizados, permitindo que você projete a aparência do aplicativo da maneira que desejar.

instagram viewer

Benefícios de usar componentes React Aria

A biblioteca React Aria Components oferece muitos benefícios, incluindo:

  • Acessibilidade: Os componentes do React Aria seguem as práticas recomendadas do WAI-ARIA, garantindo que seu aplicativo seja acessível a todos os usuários, incluindo aqueles que usam tecnologias assistivas.
  • Flexibilidade: Os componentes do React Aria não têm estilo, permitindo que você implemente seu sistema de design sem restrições.
  • Interações do usuário: React Aria fornece gerenciamento robusto de interações do usuário, incluindo teclado, mouse e interações por toque.
  • Internacionalização: React Aria oferece suporte a idiomas da direita para a esquerda, formatação de data e número e muito mais, facilitando a construção de aplicativos internacionalizados.

Construindo aplicativos React com componentes React Aria

Vamos percorrer a construção de um aplicativo React simples usando componentes React Aria. Antes de usar a biblioteca React Aria Components em seus aplicativos React, você deve criar um projeto React. Vite é uma ótima maneira de fazer isso.

Criando seu aplicativo React

Para criar seu aplicativo React usando Vite, execute o seguinte código em seu terminal:

npm init vite

A execução do código acima iniciará uma série de prompts para ajudá-lo a criar seu novo projeto React.

Por exemplo:

Após criar seu projeto, você precisará instalar as dependências necessárias. Para fazer isso, execute o seguinte código em seu terminal:

cd react-aria-app
npm install

Isso mudará seu diretório atual para o diretório do projeto e então instalará as dependências necessárias. Depois de criar seu aplicativo React, você pode instalar a biblioteca React Aria Components para adicionar recursos de acessibilidade ao seu aplicativo.

Instalando componentes React Aria

Você pode instalar a biblioteca React Aria Components usando npm ou yarn. Para instalá-lo via npm, execute o seguinte comando em seu terminal:

npm install react-aria-components

Alternativamente, para instalar via fio, execute este código:

yarn add react-aria-components

Agora que instalou a biblioteca React Aria Components, você pode usar seus componentes em seu aplicativo.

Usando os componentes React Aria

A biblioteca React Aria Components oferece uma variedade de componentes que tornam o processo de desenvolvimento mais fácil e rápido. Para usar o componente da biblioteca, importe-o para sua aplicação e renderize-o.

Por exemplo:

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







exportdefault App;

O bloco de código acima importa o Botão, Dar um pulo, DialogTrigger, e Diálogo componentes do componentes react-aria módulo. Todos os componentes importados criam um botão simples que exibe um popover quando clicado.

O DialogTrigger O componente controla a visibilidade de uma caixa de diálogo ou popover. Dentro de DialogTrigger, existe o Botão componente. Este botão aciona a visibilidade do Dar um pulo e Diálogo.

O Dar um pulo componente é um contêiner que aparece no restante da IU, enquanto o Diálogo componente exibe conteúdo em uma camada acima do aplicativo. Dentro de Dar um pulo componente é um Diálogo componente com o texto "Você clicou no botão."

Clicar no botão exibirá um popover com o texto "Você clicou no botão" na tela, dando à sua interface uma aparência semelhante à imagem abaixo.

Como você pode ver na imagem acima, os componentes da biblioteca vêm sem estilo para que você possa escolher o estilo de sua preferência.

Estilizando seus componentes

Como os componentes do React Aria não têm estilo, você pode estilizá-los como quiser. Você pode usar Folhas de estilo em cascata (CSS), Tailwind CSS, componentes estilizados ou qualquer outro método de estilo de sua preferência.

Você pode passar por diferentes customizações nomes de classe aos componentes e, em seguida, defina as classes CSS em seu arquivo CSS.

Aqui está um exemplo:

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







exportdefault App;

Neste exemplo, você define um nome da classe para o Botão, Dar um pulo, e Diálogo componentes. Agora você pode estilizar os componentes em seu arquivo 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;
}

Depois de definir os estilos de seus componentes, seu botão e popover deverão ser parecidos com isto.

Se você não quiser definir um costume nome da classe para seus componentes, a biblioteca React Aria Components inclui um padrão nome da classe para cada componente. O padrão nome da classe é react-aria-componentName, onde Nome do componente é o nome do componente que você deseja estilizar.

Por exemplo:

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

Observe que o bloco de código CSS acima aplicará esses estilos a todos Botão, Dar um pulo, e Diálogo componente que você usa em seu aplicativo.

Crie aplicativos React acessíveis e interativos

React Aria Components é uma biblioteca poderosa para construir aplicativos React acessíveis e interativos. Ele fornece componentes que tratam das interações e acessibilidade do usuário de acordo com as melhores práticas WAI-ARIA. Se você está procurando uma biblioteca de componentes que ofereça muitos componentes e flexibilidade, React Aria Components é uma excelente escolha.

Junto com a biblioteca de componentes React Aria, existem outras bibliotecas de componentes sem estilo que você pode usar para construir belos aplicativos React. Uma dessas bibliotecas inclui Radix UI. Radix UI é uma biblioteca de componentes sem estilo para construir aplicativos React de alta qualidade. É uma ótima alternativa aos componentes React Aria.