react select search
1.0.0
Em primeiro lugar, quero agradecer a todos pelo apoio incrível ao longo dos anos. Este foi um dos meus primeiros projetos de código aberto e também o primeiro de sucesso. Estou muito grato por todos os 33! colaboradores, não teria sido possível executar este projeto sem vocês.
Muita coisa aconteceu no ano passado. Tive meu primeiro filho, tive alguns trabalhos freelance demorados e algumas startups que cresceram. Isso tirou um tempo do código aberto e sinto que não posso mais fazer justiça a esse componente. Não sozinho, pelo menos.
Ainda acredito em um componente de seleção minúsculo, super rápido e sem dependência. Se houver alguém que queira co-manter isso comigo, entre em contato para discutir as próximas etapas. Envie-me um e-mail para [email protected] ou entre em contato comigo no Twitter
Instale-o com npm ( npm i react-select-search ) ou fio ( yarn add react-select-search ) e importe-o como faria normalmente.
import SelectSearch from 'react-select-search' ;
/**
* The options array should contain objects.
* Required keys are "name" and "value" but you can have and use any number of key/value pairs.
*/
const options = [
{ name : 'Swedish' , value : 'sv' } ,
{ name : 'English' , value : 'en' } ,
{
type : 'group' ,
name : 'Group name' ,
items : [
{ name : 'Spanish' , value : 'es' } ,
]
} ,
] ;
/* Simple example */
< SelectSearch options = { options } value = "sv" name = "language" placeholder = "Choose your language" / >Para mais exemplos, você pode dar uma olhada no diretório de histórias.
Você também precisará de algum CSS para fazer com que pareça correto. Um exemplo de tema pode ser encontrado em style.css. Você também pode importá-lo:
import 'react-select-search/style.css' Para uso com SSR, pode ser necessário usar o pacote commonjs (react-select-search/dist/cjs). Se você quiser utilizar o tema de exemplo (style.css), você precisa verificar se o seu script de construção manipula nomes de classes, por exemplo, minimiza-os. Se for esse o caso, você pode usar módulos CSS para obter os nomes das classes do arquivo style.css e aplicá-los usando o objeto className. O exemplo pode ser visto aqui e também aqui https://react-select-search.com/?path=/story/custom--css-modules.
Se você deseja controle completo (mais do que estilos e renderizadores personalizados), você pode usar ganchos para passar dados para seus próprios componentes e construí-los você mesmo.
import React from 'react' ;
import { useSelect } from 'react-select-search' ;
const CustomSelect = ( { options , value , multiple , disabled } ) => {
const [ snapshot , valueProps , optionProps ] = useSelect ( {
options ,
value ,
multiple ,
disabled ,
} ) ;
return (
< div >
< button { ... valueProps } > { snapshot . displayValue } < / button >
{ snapshot . focus && (
< ul >
{ snapshot . options . map ( ( option ) => (
< li key = { option . value } >
< button { ... optionProps } value = { option . value } > { option . name } < / button >
< / li >
) ) }
< / ul >
) }
< / div >
) ;
} ; Abaixo estão todas as opções disponíveis que você pode passar para o componente. Opções sem padrões são obrigatórias.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| opções | variedade | Veja a documentação de opções abaixo | |
| getOpções | função | nulo | Obtenha opções por meio de uma chamada de função, pode retornar uma promessa para uso assíncrono. Veja obter opções para mais. |
| opções de filtro | variedade | nulo | Uma matriz de funções que utiliza as últimas opções filtradas e uma consulta de pesquisa, se houver. É executado após getOptions. |
| valor | cadeia de caracteres, matriz | nulo | O valor deve ser uma matriz se for modo múltiplo. |
| múltiplo | booleano | falso | Defina como verdadeiro se desejar permitir várias opções selecionadas. |
| procurar | booleano | falso | Defina como verdadeiro para ativar a funcionalidade de pesquisa |
| desabilitado | booleano | falso | Desativa todas as funcionalidades |
| closeOnSelect | booleano | verdadeiro | A caixa de seleção ficará desfocada por padrão ao selecionar uma opção. Defina isso como falso para evitar esse comportamento. |
| rebater | número | 0 | Número de ms a esperar até chamar as opções get durante a pesquisa. |
| espaço reservado | corda | string vazia | Exibido se nenhuma opção estiver selecionada e/ou quando o campo de pesquisa estiver focado com valor vazio. |
| eu ia | corda | nulo | ID HTML no elemento de nível superior. |
| preenchimento automático | corda, ligar/desligar | desligado | Desativa/ativa a funcionalidade de preenchimento automático no campo de pesquisa. |
| foco automático | booleano | falso | Foco automático na seleção |
| nomedaclasse | corda, objeto | caixa de seleção de pesquisa | Defina uma string de classe base ou passe uma função para controle completo. Consulte classNames personalizados para obter mais informações. |
| renderOption | função | nulo | Função que renderiza as opções. Consulte renderizadores personalizados para obter mais informações. |
| renderGroupHeader | função | nulo | Função que renderiza o cabeçalho do grupo. Consulte renderizadores personalizados para obter mais informações. |
| renderValor | função | nulo | Função que renderiza o campo de valor/pesquisa. Consulte renderizadores personalizados para obter mais informações. |
| mensagem vazia | Nó de reação | nulo | Defina uma mensagem vazia para uma lista de opções vazia, você pode fornecer uma função de renderização sem argumentos, em vez de uma mensagem de string simples |
| onChange | função | nulo | Função para receber e tratar alterações de valor. |
| em foco | função | nulo | Retorno de chamada de foco. |
| onBlur | função | nulo | Desfocar retorno de chamada. |
O objeto de opções pode conter quaisquer propriedades e valores que você desejar. O único obrigatório é name .
| Propriedade | Tipo | Descrição | Obrigatório |
|---|---|---|---|
| nome | corda | O nome da opção | Sim |
| valor | corda | O valor da opção | Sim, se o tipo não for "grupo" |
| tipo | corda | Se você definir o tipo como "grupo", poderá adicionar uma série de opções que serão agrupadas | Não |
| Unid | variedade | Matriz de objetos de opção que serão usados se o tipo for definido como "grupo" | Sim, se type estiver definido como "grupo" |
| desabilitado | booleano | Defina como true para desativar esta opção | Não |
Se você definir uma string como o valor do atributo className , o componente a usará como base para todos os elementos. Se você quiser controlar totalmente os nomes das classes, você pode passar um objeto com nomes de classes. Existem as seguintes chaves:
Se o CSS não for suficiente, você também pode controlar o HTML das diferentes partes do componente.
| Ligar de volta | Argumentos | Descrição |
|---|---|---|
| renderOption | optionsProps: objeto, optionData: objeto, optionSnapshot: objeto, className: string | Controla a renderização das opções. |
| renderGroupHeader | nome: string | Controla a renderização do nome do cabeçalho do grupo |
| renderValor | valueProps: objeto, instantâneo: objeto, className: string | Controla a renderização do elemento valor/entrada |
Os optionProps e os valueProps são necessários para que o componente que você renderiza funcione. Por exemplo:
< SelectSearch renderValue = { ( valueProps ) => < input { ... valueProps } / > } / >Faça o Monkeypatch se precisar, mas certifique-se de não remover adereços importantes.
O optionSnapshot é um objeto que contém o estado do objeto: { selected: bool, highlighted: bool } .
Você pode buscar opções de forma assíncrona com a propriedade getOptions . Você pode retornar as opções diretamente ou por meio de um Promise .
function getOptions ( query ) {
return new Promise ( ( resolve , reject ) => {
fetch ( `https://www.thecocktaildb.com/api/json/v1/1/search.php?s= ${ query } ` )
. then ( response => response . json ( ) )
. then ( ( { drinks } ) => {
resolve ( drinks . map ( ( { idDrink , strDrink } ) => ( { value : idDrink , name : strDrink } ) ) )
} )
. catch ( reject ) ;
} ) ;
} A função é executada em cada atualização da consulta de pesquisa, portanto, talvez você queira limitar as buscas. Se você retornar uma promessa, a classe is-loading será aplicada ao elemento principal, dando a você a chance de alterar a aparência, como adicionar um botão giratório. A fetching propriedades também está disponível no instantâneo enviado para seus retornos de chamada de renderização.
Feito com contrib.rocks.
