react input pin code Téléchargement - react input pin code Téléchargement

react input pin code

Composants tiers

v1.2.1

Télécharger

Réagir le code de broche d'entrée

Un composant d'entrée de broches accessible et simple construit avec des composants stylisés pour ReactJS.

Démo

Ici pour voir la documentation et les exemples.

Code source sur https://github.com/luffy84217/rect-input-pin-code.

Installation

Pour démarrer, installer et enregistrer dans votre package.json Dependances, exécutez:

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

ou

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

Veuillez noter que les composants stylisés sont la dépendance des pairs.

Importation

Vous pouvez utiliser les deux façons suivantes pour importer le module.

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

Usage

Exemple de base

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

Remplir un caractère à la fois pour chaque entrée. Lorsqu'un caractère est entré, le focus se transfère automatiquement à l'entrée suivante dans la séquence jusqu'à ce que toutes les entrées soient remplies. Voici l'explication du comportement ci-dessous:

Vous ne pouvez remplir qu'un seul caractère par entrée.
Pour écraser la valeur d'une entrée, vous n'avez pas besoin de sélectionner le texte dans l'entrée. Si vous tapez un chiffre pendant que l'entrée est focalisée, l'entrée mettra à jour.
En appuyant sur Backspace lorsqu'il est vide dans l'entrée, se déplacera la mise au point vers l'entrée précédente (le cas échéant) et effacez la valeur de.

Longueur d'entrée de broche

PinInput s'attend à un tableau de chaînes pour les values Prop. Le nombre de champs d'entrée rendus est égal à la longueur du tableau.

ID de passage, nom de classe et nom

Vous pouvez transmettre id ou name ou containerClassName ou inputClassName prop.classname et le nom seront partagés entre les entrées, ce qui signifie qu'ils auront chacun son nom sur cette valeur, il est confortable pour l'utilisation de pseudo élément dans le fichier global.css . L'ID ajoute un index à toute chaîne que vous fournissez et passez à l'entrée correspondante. Par exemple, si vous passez FOO en ID et BAR comme nom et qu'il y a quatre entrées, les ID résultants sont FOO-0 , FOO-1 , FOO-2 et FOO-3 et chaque entrée a la barre de nom.

Taille de l'entrée

Vous pouvez contrôler la taille des entrées avec la size accessoires. Il est disponible en quatre tailles.

Variété	Taille	Taille de la police
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)

Permettre des valeurs d'entrée alphanumériques

Par défaut, le PinInput est passé numéro sous forme type , il accepte que les valeurs numériques pour s'afficher. Pour ajouter la prise en charge des valeurs alphanumériques, passez le type prop et définissez sa valeur sur le texte ou le nombre .

Valider et format

PinInput fournit validate Prop pour spécifier pattern d'attribut natif, qui est une expression régulière que la valeur de l'entrée doit correspondre pour que la valeur de la valeur transmet la validation de contrainte.

Prop Format Spécifiez une fonction pure pour transformer l'entrée brute. Par exemple, pour définir les valeurs sur la casse supérieure:

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

État valide et non valide

Vous pouvez passer validate Prop pour valider les valeurs d'entrée, si la valeur du test de l'entrée ne correspond pas, elle affichera la bordure d'erreur entrée instantanément, alors qu'elle affichera une bordure valide après que toutes les entrées soient remplies et passent la validation.

Vous pouvez désactiver ce comportement en définissant showState Prop à false .

Ajout de masque

Vous pouvez définir mask Prop sur TRUE pour empêcher de montrer les valeurs d'entrée. Il équivaut à définir type d'attribut natif d'entrée au mot de passe .

Désactiver la gestion de la mise au point

Par défaut, PinInput se concentre automatiquement vers l'entrée suivante une fois un champ rempli. Il transfère également la mise au point sur une entrée précédente lorsque Backspace est enfoncé avec une concentration sur une entrée vide.

Pour désactiver ce comportement, définissez autoTab Prop sur false

Autofocus

PinInput offre un moyen de le laisser se concentrer dès le départ. Définissez simplement autoFocus Prop sur True pour concentrer la première entrée lors du montage initial du composant.

Une fois que toutes les entrées sont remplies

PinInput fournit un gestionnaire d'événements onComplete pour accéder aux valeurs d'entrée, contrairement à onChange , onComplete ne déclenche que lorsque toutes les entrées sont remplies.

Remarquez que si vous proposez une liste de caractères autorisés pour validate PROP, onComplete déclenchera Ony lorsque toutes les valeurs d'entrée passent la validation.

Changer l'espace réservé

Par défaut, PinInput Payholder est (○), vous pouvez le modifier si vous le souhaitez.

Autofill et copie + coller

Essayez de copier et de coller 1234 dans l'une des entrées.

Par défaut, vous ne pouvez modifier qu'une seule entrée à la fois, mais si l'un des champs de saisie reçoit une chaîne plus longue en y collant, PinInput tente de valider la chaîne et de remplir les autres entrées.

Entrée de broches avec état (incontrôlé)

Il existe également une version incontrôlée, StatefulPinInput , qui gère son propre état. La longueur d'entrée par défaut pour ce composant est de quatre, mais vous pouvez modifier cela en passant le numéro à length Prop. Aslo, vous pouvez passer initialValue comme une valeur initiale pour StatefulPinInput .

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

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

API

Accessoires PinInput

Nom (* requis)	Taper	Défaut	Description
aria-décrit par	chaîne		Définit l'attribut Aria-DescripdBy.
aria-label	chaîne	"Veuillez saisir le code PIN"	Définit l'attribut Aria-Babel.
Aria-marquée	chaîne		Définit l'attribut aria-marquée.
assortiment automatique	chaîne	"désactivé"	Détermine si le navigateur doit fournir des suggestions de valeur.
autofocus	booléen	FAUX	Si cela est vrai, l'entrée sera axée sur le premier support.
autotab	booléen	vrai	Si True Focus se déplace automatiquement vers l'entrée suivante / précédente une fois remplie ou supprimée
frontière	chaîne	RVB (204 204 204)	Permettez-vous de personnaliser la couleur des bordures lorsque l'entrée n'est pas concentrée.
errorbordercolor	chaîne	RVB (220,53,69)	Vous permettez de personnaliser la couleur des bordures lorsque l'entrée n'est pas valide.
focusbordercolor	chaîne	RVB (13 110 253)	Permettez-vous de personnaliser la couleur des bordures lorsque l'entrée est concentrée.
validbordercolor	chaîne	RVB (25 135,84)	Vous permettez de personnaliser la couleur des bordures lorsque l'entrée est valide.
désactivé	booléen		Rendu le composant à l'état désactivé.
format	(char: chaîne) => chaîne		Fonction pure pour transformer l'entrée brute.
identifiant	chaîne		Valeur d'attribut ID à ajouter à l'élément d'entrée et en tant qu'étiquette pour la valeur d'attribut.
entrée	chaîne		Cet attribut permet à un navigateur d'afficher un clavier virtuel approprié. ( Remarque `type` Prop déterminera automatiquement `inputMode` `inputMode` approprié. Si vous passez `inputMode` prop
masque	booléen	FAUX	Empêcher de montrer le code PIN
nom	chaîne		Nom d'attribut.
onduler	(événement: react.focusevent) => void		Appelé les déclencheurs de l'événement OnBlur.
floconneux	(Valeur: String \| String [], index: nombre, valeurs: String []) => void		Appelé lorsque la valeur d'entrée est modifiée.
oncomplete	(valeurs: chaîne []) => void		Appelé lorsque toutes les entrées sont remplies et validées
onfocus	(événement: react.focusevent) => void		Appelé les déclencheurs de l'événement OnFocus.
onkeydown	(événement: react.keyboardEvent) => void		Appelé les déclencheurs de l'événement Onkeydown.
espace réservé	chaîne	"O"	Affiché lorsque le code PIN n'est pas encore entré.
requis	booléen		Rendu le composant dans l'état requis.
showstate	booléen	vrai	Déterminez si une bordure valide / non valide apparaît ou non.
taille	"xs" \| "SM" \| "MD" \| "LG"	"Maryland"	Rendu la composante dans la taille fournie.
nom de contenu	chaîne		Vous permet d'ajouter l'élément de classe personnalisée vers le conteneur.
conteneursyle	objet	{}	Vous permet de personnaliser l'élément de conteneur.
FORYCLASSNAME	chaîne		Vous permet d'ajouter la classe personnalisée pour saisir l'élément.
style entrée	objet	{}	Vous permet de personnaliser l'élément d'entrée.
taper	"numéro" \| "texte"	"nombre"	Le type de valeurs que l'entrée Pin devrait permettre
valider	String \| String [] \| Regexp		Une expression régulière que la valeur de l'entrée doit correspondre pour que la valeur transmet la validation de contrainte.
valeurs(*)	chaîne[]		Attribut de valeur PinInput.