react input pin code Download - react input pin code Fonte Download

react input pin code

Componentes de terceiros

v1.2.1

Baixar

Código de pino de entrada reagir

Um componente de entrada de pinos acessível e simples construído com componentes com estilo para reactjs.

Demonstração

imagem

Aqui para ver documentação e exemplos.

Código-fonte em https://github.com/luffy84217/react-nput-pin-code.

Instalação

Para começar, instale e salve em suas dependências package.json , execute:

npm install react-input-pin-code styled-components

ou

yarn add react-input-pin-code styled-components

Observe que os componentes de estilo são dependência dos colegas.

Importação

Você pode usar as duas maneiras a seguir para importar o módulo.

 import { PinInput } from 'react-input-pin-code' // ES Module
or
var PinInput = require ( 'react-input-pin-code' ) . PinInput // CommonJS Module

Uso

Exemplo básico

 import React from 'react' ;
import { PinInput } from 'react-input-pin-code' ;

export default ( ) => {
  const [ values , setValues ] = React . useState ( [ '' , '' , '' ] ) ;

  return (
    < PinInput
      values = { values }
      onChange = { ( value , index , values ) => setValues ( values ) }
    />
  ) ;
} ;

Preencher um caractere de cada vez para cada entrada. Quando um personagem é inserido, o foco é transferido para a próxima entrada automaticamente na sequência até que todas as entradas sejam preenchidas. Aqui está a explicação do comportamento abaixo:

Você pode preencher apenas um caractere por entrada.
Para substituir o valor de uma entrada, você não precisa selecionar o texto na entrada. Se você digitar um dígito enquanto a entrada estiver focada, a entrada será atualizada.
Pressionar Backspace quando estiver vazio na entrada moverá o foco para a entrada anterior (se houver) e limpará o valor de.

Comprimento de entrada do pino

PinInput espera uma matriz de strings para o suporte values . O número de campos de entrada renderizados é igual ao comprimento da matriz.

ID de passagem, nome de classe e nome

Você pode passar id ou name ou containerClassName ou inputClassName Prop.className e o nome serão compartilhados entre as entradas, o que significa que cada um deles terá seu nome definido para esse valor, é confortável para o uso do elemento pseudo no arquivo global.css . O ID anexará um índice a qualquer string que você fornecer e passar para a entrada correspondente. Por exemplo, se você passa Foo como ID e bar como nome e houver quatro entradas, os IDs resultantes são Foo-0 , Foo-1 , Foo-2 e Foo-3 e cada entrada possui a barra de nome.

Tamanho da entrada

Você pode controlar o tamanho das entradas com o suporte size . Ele vem em quatro tamanhos.

Variedade	Tamanho	Tamanho da fonte
xs	1.5Rem (24px)	0,75REM (12px)
sm	2REM (32px)	0,875REM (14px)
MD	2.5rem (40px)	1Rem (16px)
LG	3REM (48px)	1.125Rem (18px)

Permitindo valores de entrada alfanumérica

Por padrão, o PinInput é o número do tipo de tipo de type , portanto, aceita apenas valores numéricos para aparecer. Para adicionar suporte para valores alfanuméricos, passe o prop type e defina seu valor como texto ou número .

Validar e formato

PinInput fornece Prop validate para especificar pattern de atributo nativo, que é uma expressão regular que o valor da entrada deve corresponder para que o valor passe a validação de restrição.

Format Prop Especifique uma função pura para transformar a entrada bruta. Por exemplo, para definir os valores como maiúsculas:

(char: string) => char.toUpperCase()

Estado válido e inválido

Você pode passar o Prop validate para validar valores de entrada, se o valor da entrada não corresponder ao teste, ele mostrará a borda de erro instantaneamente, enquanto ele mostrará apenas borda válida depois que todas as entradas forem preenchidas e passam a validação.

Você pode desativar esse comportamento definindo showState Prop como FALSE .

Adicionando máscara

Você pode definir o suporte mask como TRUE para impedir que mostre valores de entrada. É equivalente a definir type de atributo nativo de entrada como senha .

Desative o gerenciamento de foco

Por padrão, os movimentos PinInput se concentram automaticamente na próxima entrada assim que um campo é preenchido. Ele também transfere foco para uma entrada anterior quando Backspace é pressionado com foco em uma entrada vazia.

Para desativar esse comportamento, defina autoTab Prop como falso

Foco automático

PinInput oferece uma maneira de se concentrar desde o início. Simplesmente defina o suporte autoFocus para focar a primeira entrada na montagem inicial do componente.

Depois que todas as entradas são preenchidas

PinInput fornece manipulador de eventos onComplete para acessar os valores de entrada, diferentemente onChange , onComplete apenas aciona quando todas as entradas são preenchidas.

Observe que, se você oferecer uma lista de caracteres permitidos para validate o Prop, onComplete acionará o ONY quando todos os valores de entrada passarem a validação.

Mudando o espaço reservado

Por padrão, o espaço reservado PinInput é (○), você pode alterar isso se desejar.

Preenchimento automático e cópia + pasta

Tente copiar e colar 1234 em qualquer uma das entradas.

Por padrão, você só pode alterar uma entrada por vez, mas se um dos campos de entrada receber uma string mais longa, colando nela, as tentativas PinInput para validar a string e preencher as outras entradas.

Entrada de pino com estado (não controlado)

Há também uma versão não controlada, StatefulPinInput , que gerencia seu próprio estado. O comprimento de entrada padrão para este componente é de quatro, mas você pode alterar isso passando o número para length . ASLO Você pode passar initialValue como um valor inicial para StatefulPinInput .

 import React from 'react' ;
import { StatefulPinInput } from 'react-input-pin-code' ;

export default ( ) => {
  return (
    < StatefulPinInput
      length = { 4 }
      initialValue = "1234"
    />
  ) ;
} ;

API

Propções PinInput

Nome (*necessário)	Tipo	Padrão	Descrição
Descrito por Aria	corda		Define o atributo ARIA-Descritedby.
ARIA-LABEL	corda	"Por favor, insira o código do PIN"	Define o atributo Aria-Label.
ARIA-LABELLEDBY	corda		Define o atributo Aria-Labelledby.
AutoComplete	corda	"desligado"	Determina se o navegador deve fornecer sugestões de valor.
foco automático	booleano	falso	Se True, a entrada será focada na primeira montagem.
Autotab	booleano	verdadeiro	Se o True Focus se moverá automaticamente para a próxima/anterior entrada, uma vez preenchido ou excluído
BorderColor	corda	RGB (204.204.204)	Deixe você personalizar a cor da borda quando a entrada não estiver focada.
ErrorDorderColor	corda	RGB (220,53,69)	Deixe você personalizar a cor da borda quando a entrada for inválida.
FocusBorderColor	corda	RGB (13.110.253)	Deixe você personalizar a cor da borda quando a entrada estiver focada.
VidalDorderColor	corda	RGB (25.135,84)	Deixe você personalizar a cor da borda quando a entrada for válida.
desabilitado	booleano		Renderiza o componente no estado com deficiência.
formatar	(char: string) => string		Função pura para transformar a entrada bruta.
eu ia	corda		Valor do atributo de identificação a ser adicionado ao elemento de entrada e como um rótulo para o valor do atributo.
inputMode	corda		Este atributo permite que um navegador exiba um teclado virtual apropriado. ( Nota `type` proibir determinará `inputMode` apropriado automaticamente. Se você passar o PropMode `inputMode` , ele substituirá `inputMode` embutido.)
máscara	booleano	falso	Evite mostrar o código do PIN
nome	corda		Atributo de nome.
onblur	(Evento: React.focusevent) => Void		Chamado o evento OnBlur Gatragers.
OnChange	(valor: string \| string [], índice: número, valores: string []) => void		Chamado quando o valor de entrada é alterado.
oComplete	(valores: string []) => void		Chamado quando todas as entradas são preenchidas e validadas
Onfocus	(Evento: React.focusevent) => Void		Chamado o evento Onfocus acionadores.
onkeydown	(Evento: React.KeyboardEvent) => void		Chamado o evento OnKeyDown acionadores.
espaço reservado	corda	"O"	Exibido quando o código PIN ainda não foi inserido.
obrigatório	booleano		Renderiza o componente no estado necessário.
ShowState	booleano	verdadeiro	Determine se a borda válida/inválida aparece ou não.
tamanho	"XS" \| "SM" \| "MD" \| "LG"	"MD"	Renderiza o componente no tamanho fornecido.
CONTENTERERCLASSNAME	corda		Permite anexar a classe personalizada ao elemento do contêiner.
contêineres	objeto	{}	Permite personalizar o elemento de contêiner.
inputclassName	corda		Permite anexar a classe personalizada ao elemento de entrada.
inputStyle	objeto	{}	Permite personalizar o elemento de entrada.
tipo	"Número" \| "texto"	"número"	O tipo de valores que a entrada de pino deve permitir
validar	string \| String [] \| Regexp		Uma expressão regular que o valor da entrada deve corresponder para que o valor passe a validação de restrição.
valores (*)	corda[]		Atributo do valor do pininput.