Descarga react input pin code : Descargar el código fuente react input pin code

react input pin code

Componentes de terceros

v1.2.1

Descargar

Código PIN de entrada reaccionar

Un componente de entrada PIN accesible y simple construido con componentes de estilo para reactjs.

Manifestación

imagen

Aquí para ver documentación y ejemplos.

Código fuente en https://github.com/luffy84217/react-input-pin-code.

Instalación

Para comenzar, instale y guarde en su package.json Json Dependencias, ejecute:

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

o

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

Tenga en cuenta que los componentes de estilo son la dependencia de los pares.

Importador

Puede usar las siguientes dos formas de importar el módulo.

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

Uso

Ejemplo 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 ) }
    />
  ) ;
} ;

Llenar un personaje a la vez para cada entrada. Cuando se ingresa un personaje, el enfoque se transfiere a la siguiente entrada automáticamente en la secuencia hasta que se completen todas las entradas. Aquí está la explicación del comportamiento a continuación:

Puede completar solo un personaje por entrada.
Para sobrescribir el valor de una entrada, no necesita seleccionar el texto en la entrada. Si escribe un dígito mientras la entrada se enfoca, la entrada se actualizará.
Al presionar Backspace cuando esté vacío en la entrada, moverá el enfoque a la entrada anterior (si la hay) y borrará el valor de.

Longitud de entrada del pasador

PinInput espera una matriz de cadenas para los values Prop. El número de campos de entrada renderizados es igual a la longitud de la matriz.

ID de aprobación, nombre de clase y nombre

Puede pasar id o name o containerClassName o inputClassName Prop.ClassName y el nombre se compartirán entre las entradas, lo que significa que cada uno tendrá su nombre establecido en este valor, es cómodo para el uso de pseudo elemento en el archivo global.css . ID agregará un índice a cualquier cadena que proporcione y pase a la entrada correspondiente. Por ejemplo, si pasa FOO como ID y barra como nombre y hay cuatro entradas, las ID resultantes son FOO-0 , FOO-1 , FOO-2 y FOO-3 y cada entrada tiene la barra de nombres.

Tamaño de entrada

Puede controlar el tamaño de las entradas con el size . Viene en cuatro tamaños.

Variedad	Tamaño	Tamaño de fuente
XS	1.5rem (24px)	0.75rem (12px)
sm	2rem (32px)	0.875REM (14px)
Maryland	2.5rem (40px)	1Rem (16px)
lg	3REM (48px)	1.125Rem (18px)

Permitir valores de entrada alfanumérica

De manera predeterminada, el número PinInput se pasa como type apoyo, por lo que acepta solo valores numéricos para aparecer. Para agregar soporte para los valores alfanuméricos, pase el type de accesorio y establezca su valor en texto o número .

Validar y formatear

PinInput proporciona validate Prop para especificar pattern de atributos nativos, que es una expresión regular que el valor de la entrada debe coincidir para que el valor pase la validación de restricciones.

Format de apoyo Especifique una función pura para transformar la entrada sin procesar. Por ejemplo, para establecer los valores en la caja superior:

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

Estado válido e inválido

Puede aprobar validate los valores de entrada para validar los valores de entrada, si el valor de la entrada no coincide con la prueba, mostrará que el borde de errores ingresará instantáneamente, mientras que solo mostrará un borde válido después de que se completen todas las entradas y pase la validación.

Puede deshabilitar este comportamiento estableciendo showState Prop en falso .

Agregar máscara

Puede establecer el accesorio mask para evitar que muestre valores de entrada. Es equivalente a configurar type de atributo nativo de entrada a la contraseña .

Desactivar la gestión de enfoque

Por defecto, PinInput mueve el enfoque automáticamente a la siguiente entrada una vez que se llena un campo. También transfiere el enfoque a una entrada anterior cuando Backspace se presiona con el enfoque en una entrada vacía.

Para deshabilitar este comportamiento, establezca el accesorio autoTab en falso

Enfoque automático

PinInput ofrece una manera de concentrarse desde el principio. Simplemente establezca autoFocus Prop para enfocar la primera entrada en el montaje inicial del componente.

Una vez que se completan todas las entradas

PinInput proporciona un controlador de eventos onComplete para acceder a los valores de entrada, a diferencia de onChange , onComplete solo desencadenantes cuando se llenan todas las entradas.

Observe si ofrece una lista de caracteres permitidos para validate el PROP, onComplete activará en general cuando todos los valores de entrada pasan la validación.

Cambiar el marcador de posición

Por defecto, el marcador de posición PinInput es (○), puede cambiar eso si lo desea.

Autocomisionar y copiar + pegar

Intente copiar y pegar 1234 en cualquiera de las entradas.

Por defecto, solo puede cambiar una entrada a la vez, pero si uno de los campos de entrada recibe una cadena más larga pegando, PinInput intenta validar la cadena y llenar las otras entradas.

Entrada de pin estatal (no controlado)

También hay una versión no controlada, StatefulPinInput , que administra su propio estado. La longitud de entrada predeterminada para este componente es cuatro, pero puede cambiar eso pasando el número a length de Prop. ASLO Puede pasar initialValue como un valor inicial para StatefulPinInput .

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

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

API

Accesorios PinInput

Nombre (*requerido)	Tipo	Por defecto	Descripción
Aria-descrita por	cadena		Establece el atributo de ARIA-DescribedBy.
etiqueta aria	cadena	"Ingrese el código PIN"	Establece el atributo Aria-Label.
Aria-etiquetado por	cadena		Establece el atributo ARIA-LabeledBy.
autocompletar	cadena	"apagado"	Determina si el navegador debe proporcionar sugerencias de valor.
enfoque automático	booleano	FALSO	Si es verdadero, la entrada se centrará en el primer soporte.
autotab	booleano	verdadero	Si True Focus se moverá automáticamente a la entrada siguiente/anterior una vez llenada o eliminada
bordercolor	cadena	RGB (204,204,204)	Deje personalizar el color del borde cuando la entrada no esté enfocada.
ErrorBorderColor	cadena	RGB (220,53,69)	Deje personalizar el color del borde cuando la entrada no sea válida.
FocusBercolor	cadena	RGB (13,110,253)	Deje personalizar el color del borde cuando la entrada esté enfocada.
ValidBorderColor	cadena	RGB (25,135,84)	Deje personalizar el color del borde cuando la entrada sea válida.
desactivado	booleano		Rendera el componente en el estado discapacitado.
formato	(char: string) => string		Función pura para transformar la entrada sin procesar.
identificación	cadena		El valor de atributo de identificación se agregará al elemento de entrada y como una etiqueta para el valor de atributo.
InputMode	cadena		Este atributo permite que un navegador muestre un teclado virtual apropiado. ( Nota El tipo `type` determinará automáticamente `inputMode` apropiado. Si pasa el PROP `inputMode` , anulará `inputMode` incorporado).
mascarilla	booleano	FALSO	Evitar que muestre el código PIN
nombre	cadena		Atributo de nombre.
en el franco	(evento: react.focusevent) => void		Llamado los disparadores del evento Onblur.
en el cambio	(valor: string \| string [], índice: número, valores: string []) => void		Llamado cuando se cambia el valor de entrada.
en comodidad	(valores: string []) => void		Llamado cuando todas las entradas se completan y se validan
en el tope	(evento: react.focusevent) => void		Llamado los desencadenantes del evento Onfocus.
oneydown	(Evento: React.KeyboardEvent) => Void		Llamado el evento OnKeydown disparadores.
marcador de posición	cadena	"O"	Se muestra cuando el código PIN aún no se ingresa.
requerido	booleano		Rendera el componente en el estado requerido.
showstate	booleano	verdadero	Determine si aparece el borde válido/no válido o no.
tamaño	"XS" \| "SM" \| "MD" \| "LG"	"Maryland"	Rendera el componente en tamaño proporcionado.
contenedorclassname	cadena		Le permite agregar clase personalizada al elemento contenedor.
estilo de contenedor	objeto	{}	Le permite personalizar el elemento contenedor.
InputClassName	cadena		Le permite agregar la clase personalizada al elemento de entrada.
estilo de entrada	objeto	{}	Le permite personalizar el elemento de entrada.
tipo	"Número" \| "texto"	"número"	El tipo de valores que la entrada de pin debe permitir
validar	cadena \| cadena [] \| Regexp		Una expresión regular que el valor de la entrada debe coincidir para que el valor pase la validación de restricciones.
valores(*)	cadena[]		Atributo de valor de PinInput.