Baixar react selectrix - Baixar código-fonte react selectrix

react selectrix

Outras categorias

1.0.17

Baixar

Seletriz de reação

Um substituto React Select bonito, materializado, fácil de usar e flexível

Demonstração

Confira a demonstração e use exemplos aqui!

Instalando

 npm i --save-dev react-selectrix

Documentação

https://github.com/stratos-vetsos/react-selectrix/

Importe para o seu projeto

 import Selectrix from "react-selectrix";

Exemplo Básico

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onChange = { value => console . log ( value ) }
/>

Adereços

Nome	Tipo	Valor padrão	Descrição
opções	variedade	[]	Uma matriz de opções disponíveis (Objetos com pares "chave", "rótulo" e opcionalmente propriedade "desativado").
múltiplo	booleano	falso	Se o Select suporta vários valores.
pesquisável	booleano	verdadeiro	Se o Select é pesquisável .
sem mensagem de resultados	corda	Nenhum resultado corresponde	A mensagem de nenhum resultado corresponde .
materializar	booleano	verdadeiro	Se o estilo do Select deve ser Materializado ou padrão.
valor padrão	booleano / array / string	falso	Se você tiver valores pré-selecionados, use esta propriedade. Use uma matriz de teclas de opção para seleções múltiplas ou chave como uma string para seleção única.
caixas de seleção	booleano	falso	Defina isso como verdadeiro se desejar renderizar caixas de seleção em vez de itens de lista.
altura	número	190	A altura do menu suspenso.
placeHolderInside	booleano	falso	Se o espaço reservado for uma opção.
espaço reservado	corda	Selecione	O espaço reservado do Select.
está aberto	booleano	falso	Se o Select deve ser renderizado aberto.
seta	booleano	verdadeiro	Se deve mostrar uma seta no cabeçalho do Select.
desabilitado	booleano	falso	Se o Select deve ser desabilitado.
barra de rolagem personalizada	booleano	falso	Uma barra de rolagem personalizada (apenas para Chrome)
fique aberto	booleano	falso	Se o Select deve ficar aberto ou não.
vírgulaSeparado	booleano	falso	Se você deseja que os valores selecionados sejam uma string separada por vírgula, mude para "true". (Disponível apenas com vários suportes definidos como "true". )
linha única	booleano	falso	Onde os valores selecionados (Cabeçalho do Select) devem estar contidos em uma linha.
vida	booleano	falso	Modo Último a Entrar, Primeiro a Sair . A última seleção do usuário vai primeiro. (Disponível apenas com vários suportes definidos como "true". )
índice de pesquisa	booleano	verdadeiro	Habilite a pesquisa pelos campos Índice e Valor
selecioneAllButton	booleano	falso	Se um "botão selecionar tudo" deve estar visível no cabeçalho do Select.
éDropDown	booleano	verdadeiro	Defina isso como verdadeiro se quiser usar o Select como um menu suspenso . Ao selecionar uma opção, o Select é recolhido e o cabeçalho continua tendo o espaço reservado como valor.
etiquetas	booleano	falso	Se deve oferecer suporte a tags personalizadas.
chaves personalizadas	objeto / booleano	falso	Passe um objeto para alterar as chaves de opção padrão (key, label). Sintaxe de exemplo: `{ key: "url", label: "title" }` , para alterar a chave para "url" e o rótulo para "title".
ajax	booleano / objeto	falso	Se deve ativar o ajax. A biblioteca oferece suporte a chamadas assíncronas por meio da API fetch. Propriedades padrão disponíveis do objeto ajax: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.` Você pode encontrar detalhes de todas as propriedades do objeto ajax na próxima seção e em nossa página de demonstração.
onRenderOption	função / booleano	falso	Use esta função para renderizar itens de opção personalizados
onRenderSelection	função / booleano	falso	Use esta função para renderizar itens selecionados personalizados
onChange	função	indefinido	Use este retorno de chamada para capturar o gatilho de mudança do Select.
onOpen	função	indefinido	Use este retorno de chamada para capturar o gatilho aberto do Select.
emFechar	função	indefinido	Use este retorno de chamada para capturar o gatilho de fechamento do Select.

Suporte Ajax - detalhamento

Nome	Tipo	Valor padrão	Descrição
url	corda	''	A url que o Select vai buscar as opções disponíveis.
cabeçalhos	objeto	{}	Passe todos os cabeçalhos que deseja buscar a API.
rebater	número	200	A rejeição das chamadas ajax em milissegundos.
buscarOnSearch	booleano	falso	Se você não deseja que as opções sejam pré-preenchidas quando o Select for aberto, mas deseja consultá-las com base no valor de pesquisa do usuário.
q	corda	''	Esta propriedade acompanha a propriedade fetchOnSearch, definida como "true". Dependendo da API REST fornecer opções, você deverá alterar esse valor de acordo. por exemplo, "&pesquisa={q}". Sempre que você usar a pseudo variável {q}, a consulta de pesquisa do usuário será injetada na solicitação final.
nestedKey	string / booleano	falso	Se sua API REST retornar os dados reais em um nível mais profundo, dentro de uma chave aninhada, digamos "artigos", defina nestedKey como "artigos".
prompt de pesquisa	booleano	verdadeiro	Esta propriedade acompanha a propriedade fetchOnSearch e indica ao usuário quantos caracteres a mais devem digitar, antes que a pesquisa ajax aconteça.
comprimento mínimo	número	1	Esta propriedade acompanha a propriedade fetchOnSearch e searchPrompt definido como "true". É o comprimento mínimo de caracteres que o usuário deve digitar antes que a pesquisa da chamada ajax ocorra.

Retornos de chamada - detalhamento

Nome	Argumentos	Descrição
onChange	valor	O objeto selecionado se o Select for único e uma matriz de objetos se o Select for múltiplo.
onRenderOption	opção, índice	A opção que será renderizada e seu índice correspondente.
onRenderSelection	selecionado, configurações, desmarcar	O objeto selecionado, as configurações do Select e uma função de retorno de chamada para desmarcar.
onOpen	N / D
emFechar	N / D

Exemplo de Ajax

Muito obrigado ao newsapi.org por sua excelente API. Confira este exemplo em ação, em nossa página de demonstração.

 < Selectrix
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/everything?q=bitcoin&sortBy=publishedAt&apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		nestedKey : "articles"
	} }
/>

Exemplo de Ajax com fetchOnSearch

Confira este exemplo em ação, em nossa página de demonstração.

 < Selectrix
	multiple = { true }
	stayOpen = { true }
	materialize = { true }
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/top-headlines?apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		fetchOnSearch : true ,
		q : "&q={q}" ,
		nestedKey : "articles" ,
		minLength : 3 ,
		debounce : 300
	} }
/>

Exemplo de tags

Confira este exemplo em ação, em nossa página de demonstração.

 < Selectrix
	multiple = { true }
	materialize = { true }
	tags = { true }
	options = { [
		{
			key : "hotdog" ,
			label : "Hot Dog"
		} ,
		{
			key : "pizza" ,
			label : "Pizza"
		}
	] }
	onChange = { value => console . log ( value ) }
/>

Exemplo de renderização personalizada

Confira este exemplo em ação, em nossa página de demonstração.

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onRenderOption = { onRenderOption }
	onRenderSelection = { onRenderSelection }
	onChange = { value => console . log ( value ) }
/>

const onRenderOption = ( option , index ) => (
	< span > < i className = "fa fa-laptop" > </ i > { option . label } </ span >
)

const onRenderSelection = ( selected , settings , deselect ) => (
	< span style = { { marginRight : 10 , border : "1px solid #eee" , padding : 5 } } >
		{ selected . label }
		< i style = { { paddingLeft : 5 , cursor : "pointer" } } onClick = { deselect } className = "fa fa-window-close" > </ i >
	</ span >
)