Crie lindos menus suspensos com React Select

Uma entrada selecionada é um componente útil do aplicativo da web que permite escolher um valor 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 seu design.

React Select fornece uma solução flexível e personalizável para aprimorar a aparência e a funcionalidade das entradas suspensas.

Instalando o React Select

Integrando React com outras bibliotecas ou tecnologias, como React Select, React Redux e muitos mais, podem simplificar o processo de desenvolvimento.

Para começar a usar o React Select, você precisa instalá-lo em seu projeto. Para faça isso usando npm, execute este comando de terminal no diretório do seu projeto:

npm i --save react-select

Isso instalará e configurará a biblioteca em seu projeto React, para que você possa começar a usá-la.

Criando entradas selecionadas com React Select

Agora que configurou a biblioteca, você pode usá-la para criar entradas selecionadas. Para fazer isso, você usará o

Selecione componente. Este é um componente altamente personalizável que permite aos usuários selecionar opções em uma lista.

Aqui está um exemplo de como usar o componente Select:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (




 </div>
 )
}
exportdefault App

Este exemplo começa importando o Selecione componente de “selecionar reação”. Ele define um opções array com três objetos, cada um com um valor e um rótulo propriedade. A propriedade value representa o valor que o formulário enviará ao backend quando você o enviar. A propriedade label é o texto que o componente Select exibirá no menu suspenso.

Ao renderizar o componente Select, passe o array de opções para ele usando o comando opções suporte.

Com este bloco de código, a biblioteca React Select irá gerar um menu suspenso como este:

Personalizando as entradas selecionadas

React Select fornece várias maneiras de personalizar as entradas selecionadas. Você pode usar classes CSS ou aplicar estilos embutidos diretamente nas entradas selecionadas, de acordo com suas preferências.

Personalizando com classes CSS

A biblioteca React Select fornece um nome da classe suporte para o Selecione componente. Use esta propriedade className para aplicar Cascading Style Sheet (CSS) personalizada estilos para seus componentes Select.

Por exemplo:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (



'select'/>
 </div>
 )
}
exportdefault App

O bloco de código acima é semelhante ao anterior, mas usa o nome da classe prop para aplicar uma classe CSS personalizada ao Selecione componente. Forneça um nome na propriedade className e você poderá usá-lo para aplicar estilos CSS ao componente:

.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}

Depois de definir os estilos, sua entrada de seleção ficará assim:

Personalizando com estilos embutidos

Você também pode definir estilos embutidos em um objeto que você passa através do estilos suporte do Selecione componente. Isso lhe dá mais controle sobre o estilo de elementos individuais.

Aqui está um exemplo:

import React from"react"
import Select from"react-select"
functionApp() {
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>
 )
}
exportdefault App

O objeto de suporte, estilos personalizados, contém propriedades de estilo para o componente Select ao controle, opção, e cardápio peças. Essas propriedades são funções que recebem dois argumentos: estilosbase e estado.

O parâmetro baseStyles representa os estilos padrão fornecidos pelo React Select, enquanto o parâmetro state representa o estado atual do elemento. Neste exemplo, as funções usam o operador spread para combinar baseStyles com estilos extras para cada parte do componente.

Depois de aplicar esses estilos, sua entrada selecionada deverá ficar assim:

Adicionando funcionalidade às entradas selecionadas

React Select fornece vários recursos para aprimorar a funcionalidade de entradas selecionadas. Você pode ativar a funcionalidade de seleção múltipla e pesquisa e até mesmo criar componentes suspensos personalizados.

Funcionalidade de seleção múltipla

Para ativar a funcionalidade de seleção múltipla em seus menus suspensos, passe o éMulti prop para o componente Select. Isso permite que os usuários selecionem várias opções no menu suspenso.

Por exemplo:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]
return (




 </div>
 )
}
exportdefault App

Este exemplo demonstra como usar o éMulti prop para adicionar a funcionalidade de seleção múltipla às suas entradas selecionadas.

Funcionalidade de pesquisa

A biblioteca React Select fornece funcionalidade de pesquisa integrada para filtrar opções facilmente. Por padrão, o componente Selecionar exibe a entrada de pesquisa quando você abre o menu suspenso. Os usuários podem digitar a entrada de pesquisa para filtrar as opções disponíveis.

Para ativar a funcionalidade de pesquisa, passe o é pesquisável suporte para o Selecione componente. Como o éMulti prop, isSearchable aceita um valor booleano.

Aqui está um exemplo de como usar a propriedade isSearchable para ativar a funcionalidade de pesquisa:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]
return (




 </div>
 )
}
exportdefault App

A renderização do bloco de código acima exibirá uma entrada selecionada com funcionalidade de pesquisa. Será parecido e funcionará assim:

Crie componentes suspensos personalizados

React Select permite que você crie componentes suspensos personalizados usando a propriedade Components. Você pode substituir os componentes padrão fornecidos pelo React Select e personalizar a aparência e o comportamento do menu suspenso de acordo com seu gosto.

Por exemplo:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (



{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )

const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }
return<Selectoptions={options}components={customComponents} />
}
exportdefault App

Este bloco de código mostra como criar componentes personalizados para uma entrada selecionada usando o componentes suporte do Selecione componente. Ele importa o componentes objeto que é uma coleção de componentes predefinidos que você pode usar para personalizar a aparência e o comportamento de vários elementos em suas entradas selecionadas.

O código define dois componentes funcionais: Opção personalizada e Indicador suspenso personalizado. O componente CustomOption usa um objeto como parâmetro. Este objeto contém várias propriedades que o React Select fornece, como innerProps e rótulo.

O componente CustomDropdownIndicator leva adereços como parâmetro. Este componente renderiza um indicador suspenso personalizado com um símbolo de seta para baixo. O código cria um componentes personalizados objeto que mapeia os componentes CustomOption e CustomDropdownIndicator para o correspondente Opção e Indicador suspenso chaves.

Finalmente, esse código passa o objeto customComponents para a propriedade Components do componente Select. Isso renderizará uma entrada selecionada com os componentes personalizados, assim:

Componentes padrão podem ser mais poderosos e atraentes

React Select é uma biblioteca poderosa que permite criar entradas de seleção bonitas e elegantes no React. Você pode personalizar as entradas selecionadas, adicionar funcionalidade a elas e criar componentes suspensos personalizados. Aproveitando esta biblioteca, você pode aprimorar a aparência e a experiência do usuário de seus aplicativos React.