Criar dropdowns bonitos com o React Select
Um select input é um componente útil de uma aplicação Web que permite escolher um valor de entre várias opções sem ocupar muito espaço. Mas o estilo padrão pode ser monótono e entrar em conflito com o resto do design.
O React Select oferece uma abordagem adaptável e personalizada para elevar o apelo visual e o desempenho dos elementos de entrada suspensos, fornecendo aos programadores ferramentas versáteis para melhorar o design da interface do utilizador.
Instalando o React Select
A incorporação do React com várias bibliotecas ou tecnologias adicionais pode simplificar o fluxo de trabalho de desenvolvimento, fornecendo uma integração perfeita entre esses componentes. Exemplos de tais integrações incluem React Select, React Redux, entre outros, que oferecem uma abordagem unificada para gerenciar funcionalidades complexas em aplicativos.
Para iniciar a utilização do React Select em um projeto, é necessário incorporá-lo como uma instalação por meio de seu empreendimento existente. Para realizar esse feito por meio do gerenciador de pacotes npm, navegue até o diretório raiz do projeto e execute o comando a seguir no terminal:
npm i --save react-select
O processo acima mencionado facilitará a integração da biblioteca especificada na sua aplicação React, permitindo assim a sua utilização.
Criando entradas de seleção com o React Select
Uma vez estabelecida a biblioteca, sua utilização permite a geração de elementos de entrada de seleção por meio do emprego do componente Select, versátil e configurável. Este componente facilita a seleção do utilizador a partir de uma série de opções disponíveis.
O código fornecido demonstra a implementação do componente React Native Select , que permite aos utilizadores selecionar uma ou mais opções de uma lista. O elemento é utilizado para introduzir texto como entrada para filtrar os resultados com base nas palavras-chave introduzidas pelo utilizador. Quando o botão “Enter” é premido, os dados filtrados são apresentados num menu pendente por baixo da barra de pesquisa para seleção pelo utilizador.
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} />
</div>
)
}
export default App
Nesta ilustração, importamos o componente ‘Select’ da biblioteca ‘react-select’. Em seguida, criamos uma matriz de opções que contém três objectos, em que cada objeto possui duas propriedades - o atributo “value” e o atributo “label”. O atributo “value” significa os dados que devem ser transmitidos ao servidor aquando da apresentação do formulário, enquanto o atributo “label” indica o texto apresentado na lista pendente.
Ao processar o componente Select, é essencial fornecer uma lista de opções como entrada, utilizando a propriedade “options”.Isso permite que o componente funcione de forma eficaz e exiba as opções de seleção desejadas para os usuários.
Este bloco de código permite a utilização da biblioteca React Select para criar um menu de seleção com a seguinte aparência:
Personalizando as entradas de seleção
O React Select oferece uma infinidade de opções para personalizar a aparência e a funcionalidade de seus elementos de seleção por meio da utilização de classes CSS ou empregando técnicas de estilo em linha que melhor se adaptam às preferências de design de cada um.
Personalizando com classes CSS
A biblioteca React Select oferece uma propriedade className para o componente Select , que permite que os usuários transmitam CSS (Cascading Style Sheets) personalizadas para sua escolha de elementos de seleção.
Por exemplo:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} className='select'/>
</div>
)
}
export default App
O excerto de código fornecido demonstra uma instância da sintaxe da linguagem de programação JavaScript. Diz respeito a elementos HTML e aos seus respectivos atributos. Especificamente, ilustra a utilização do atributo className no elemento , permitindo a aplicação de classes CSS personalizadas através do fornecimento de uma cadeia de identificação única como valor. Esta prática permite personalizações de estilo na aparência visual do componente renderizado.
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Após o estabelecimento destes estilos, o aspeto do seu select input será o seguinte:
Personalizando com estilos embutidos
Como alternativa, é possível implementar estilos embutidos incorporando-os em um objeto de estilo que é posteriormente passado como parâmetro para a propriedade “styles” associada ao componente “Select”. Esta abordagem permite uma maior flexibilidade e precisão no controlo do aspeto de componentes específicos.
Aqui está um exemplo:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customStyles = {
control: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#e2e2e2",
}),
option: (baseStyles, state) => ({
...baseStyles,
backgroundColor: state.isFocused ? "#e2e2e2" : "",
color: state.isFocused ? "#333333" : "#FFFFFF",
}),
menu: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#333333",
}),
}
return (
<div>
<Select options={options} styles={customStyles} />
</div>
)
}
export default App
O objeto customStyles em TypeScript serve como um repositório de propriedades estilísticas adaptadas especificamente para os vários componentes da biblioteca React Select. Esses estilos são encapsulados em funções que aceitam dois parâmetros - baseStyles , representando um conjunto herdável de atributos padrão, e state , significando a configuração atual ou o status do elemento em questão. Ao empregar esta abordagem, os programadores podem facilmente modificar e aplicar características visuais distintas aos elementos Controlo, Opção e Menu do componente Selecionar.
O parâmetro baseStyles significa os atributos de design padrão fornecidos pelo React Select, enquanto o parâmetro state denota a condição atual do componente. Neste caso, ambos utilizam o operador de propagação em conjunto para reunir as características de estilo de base acima mencionadas, juntamente com configurações visuais adicionais para cada secção da interface.
Após a implementação destes ajustes estilísticos, o campo de entrada selecionado terá uma apresentação semelhante ao exemplo fornecido abaixo:
Adicionando funcionalidade às entradas de seleção
O React Select oferece uma variedade de recursos que aumentam a utilidade dos elementos de seleção. Entre eles estão a capacidade de implementar funcionalidades de pesquisa e seleção múltipla, bem como a criação de menus suspensos personalizados.
Funcionalidade de seleção múltipla
Para permitir que os utilizadores seleccionem várias opções numa lista pendente, pode fornecer o atributo “isMulti” como parâmetro para o elemento Select. Ao fazê-lo, permitirá que os indivíduos escolham mais do que uma opção entre as alternativas apresentadas.
Por exemplo:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
{ value: "grapes", label: "Grapes" },
{ value: "orange", label: "Orange" },
]
return (
<div>
<Select options={options} isMulti />
</div>
)
}
export default App
Esta ilustração mostra a implementação da propriedade “isMulti”, que permite capacidades de seleção múltipla para elementos de entrada select.
Funcionalidade de pesquisa
A biblioteca React Select oferece um recurso de pesquisa conveniente que é inerentemente integrado ao seu componente Select. Ao abrir o menu suspenso, o comportamento padrão do componente Select exibe a entrada de pesquisa para acessibilidade imediata dos usuários. Depois disso, os utilizadores podem introduzir a consulta pretendida através da entrada de pesquisa para restringir eficazmente as opções apresentadas com base nos seus critérios específicos.
Para conceder capacidades de pesquisa à componente Select, forneça à propriedade “isSearchable” um valor booleano. Esta ação é paralela ao fornecimento do atributo “isMulti”, que também necessita de uma entrada booleana.
Considere o seguinte trecho de código, que demonstra a implementação da propriedade isSearchable para habilitar a funcionalidade de pesquisa em um componente React:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]
return (
<div>
<Select options={options} isSearchable />
</div>
)
}
export default App
O bloco de código, quando renderizado, produzirá um elemento HTML do tipo “select” que possui a capacidade de realizar pesquisas por meio de seu menu suspenso.A aparência e o comportamento do referido elemento se assemelharão à seguinte estrutura:
Criar componentes suspensos personalizados
O React Select oferece uma abordagem versátil para a criação de menus suspensos personalizados por meio de sua propriedade de componente, permitindo que os usuários modifiquem as opções padrão oferecidas pelo React Select com estilos e funcionalidades personalizados que se alinham às preferências individuais.
Por exemplo:
import React from "react"
import Select, { components } from "react-select"
function App() {
const CustomOption = (obj) => (
<div {...obj.innerProps}>
<span>{obj.label}</span>
<span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)
const CustomDropdownIndicator = (props) => (
<components.DropdownIndicator {...props}>
<span>↓</span>
</components.DropdownIndicator>
)
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}
return <Select options={options} components={customComponents} />
}
export default App
O código fornecido ilustra o processo de criação de componentes personalizados para um menu suspenso utilizando a propriedade “components” do elemento “Select”. Para tal, importa o objeto “components”, que funciona como uma acumulação de componentes pré-fabricados que facilitam a personalização de vários aspectos visuais e funcionalidades associados aos menus pendentes.
CustomOption e CustomDropdownIndicator. O primeiro componente aceita um argumento na forma de um objeto que contém várias propriedades tipicamente fornecidas pelo React Select, como innerProps e label.
O componente CustomDropdownIndicator aceita parâmetros na forma de prop(s). Ele é responsável por renderizar um indicador dropdown personalizado com uma seta icônica apontando para baixo. Para tal, utiliza um objeto customComponents que estabelece uma correspondência entre os componentes CustomOption e CustomDropdownIndicator, mapeando-os para as respectivas chaves Option e DropdownIndicator.
Por fim, este script transfere o objeto customComponents para a propriedade components do elemento Select . Consequentemente, gera uma entrada de seleção com os componentes personalizados, conforme ilustrado abaixo:
Os componentes padrão podem ser mais poderosos e atraentes
O React Select é uma ferramenta avançada que permite que os desenvolvedores criem entradas de seleção visualmente atraentes e bem projetadas dentro da estrutura do React. A biblioteca oferece flexibilidade para personalizar a aparência desses elementos de entrada e adicionar funcionalidades para atender a requisitos específicos. Ao utilizar o React Select, é possível melhorar significativamente o apelo visual e a interação geral do utilizador com as suas aplicações React.