Download react input pin code - react input pin code Source Code herunterladen

react input pin code

Komponenten von Drittanbietern

v1.2.1

Herunterladen

React Eingabepincode reagieren

Eine zugängliche und einfache Pin-Eingangskomponente, die mit gestylerischen Komponenten für ReactJs erstellt wurde.

Demo

Bild

Hier, um Dokumentation und Beispiele anzuzeigen.

Quellcode unter https://github.com/luffy84217/react-input-pin-code.

Installation

Um loszulegen, zu installieren und in Ihrem package.json zu speichern.

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

oder

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

Bitte beachten Sie, dass gestaltete Komponenten Peer-Abhängigkeit sind.

Import

Sie können die folgenden zwei Möglichkeiten verwenden, um Modul zu importieren.

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

Verwendung

Grundlegendes Beispiel

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

Füllen Sie jeweils einen Charakter für jede Eingabe. Wenn ein Zeichen eingegeben wird, überträgt der Fokus in der Sequenz automatisch auf die nächste Eingabe, bis alle Eingänge ausgefüllt sind. Hier finden Sie die Erläuterung des Verhaltens unten:

Sie können nur einen Zeichen pro Eingabe ausfüllen.
Um den Wert einer Eingabe zu überschreiben, müssen Sie den Text in der Eingabe nicht auswählen. Wenn Sie während der Fokussierung der Eingabe eine Ziffer eingeben, aktualisiert die Eingabe.
Wenn Sie Backspace drücken, wenn es in der Eingabe leer ist, wird der Fokus auf die vorherige Eingabe (falls vorhanden) bewegt und den Wert von gelöscht.

Pin -Eingangslänge

PinInput erwartet eine Reihe von Zeichenfolgen für die values . Die Anzahl der gelieferten Eingangsfelder entspricht der Länge des Arrays.

Passieren ID, Klassenname und Name

Sie können id oder name oder containerClassName übergeben oder inputClassName Prop.ClassName und der Name unter den Eingängen geteilt werden. Dies bedeutet, dass sie jeweils ihren Namen auf diesen Wert einstellen können. Es ist bequem für die Verwendung von Pseudo -Elementen in global.css -Datei. ID findet einen Index an eine beliebige Zeichenfolge an, die Sie zur Verfügung stellen, und übergeben an die entsprechende Eingabe. Wenn Sie beispielsweise Foo als ID und Bar als Name übergeben und vier Eingänge gibt, sind die resultierenden IDs Foo-0 , Foo-1 , Foo-2 und Foo-3 und jede Eingabe hat die Namensleiste.

Größe des Eingangs

Sie können die Größe der Eingänge mit der size steuern. Es kommt in vier Größen.

Vielfalt	Größe	Schriftgröße
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)

Alphanumerische Eingangswerte zulassen

Standardmäßig wird der PinInput als Typ als type übergeben, sodass er nur numerische Werte zum Anzeigen akzeptiert. Um Unterstützung für alphanumerische Werte hinzuzufügen, übergeben Sie die type -Prop und setzen Sie ihren Wert entweder auf Text oder Nummer .

Validieren und formatieren

PinInput bietet validate -Prop, um das native pattern anzugeben. Dies ist ein regulärer Ausdruck, den der Wert der Eingabe übereinstimmen muss, damit der Wert zur Übergabe der Einschränkungsvalidierung übergeht.

Format -Prop Geben Sie eine reine Funktion an, um die Roheingabe zu transformieren. Zum Beispiel, um die Werte auf den oberen Fall einzustellen:

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

Gültiger und ungültiger Zustand

Sie können validate -Validierung übergeben, um Eingabewerte zu validieren. Wenn der Wert des Eingangs nicht übereinstimmt, wird der Fehlergrenze sofort angezeigt, während er nur gültigen Grenze angezeigt wird, nachdem alle Eingänge ausgefüllt wurden und die Validierung bestanden.

Sie können dieses Verhalten deaktivieren, indem Sie showState -Prop auf false festlegen.

Maske hinzufügen

Sie können mask -Prop auf True einstellen, um zu verhindern, dass Eingangswerte angezeigt werden. Es ist gleichbedeutend mit dem Einstellen von Eingaben nativem type auf Kennwort .

Fokusmanagement deaktivieren

Standardmäßig werden sich PinInput -Bewegungen automatisch auf die nächste Eingabe konzentrieren, sobald ein Feld gefüllt ist. Es überträgt auch den Fokus auf eine frühere Eingabe, wenn Backspace mit Fokus auf einen leeren Eingang gedrückt wird.

Um dieses Verhalten zu deaktivieren, setzen Sie autoTab Prop auf false fest

Autofokus

PinInput bietet einen Weg, den es von Anfang an konzentrieren kann. Setzen Sie einfach autoFocus -Prop auf True , um die erste Eingabe bei der anfänglichen Montage der Komponente zu fokussieren.

Sobald alle Eingänge ausgefüllt sind

PinInput bietet onComplete -Event -Handler, um Eingangswerte zuzugreifen, im Gegensatz zu onChange onComplete -Auslöser nur dann, wenn alle Eingänge ausgefüllt werden.

Beachten Sie , wenn Sie eine Liste der zulässigen Zeichen zur validate von Propiten anbieten, löst onComplete die Validierung aus.

Den Platzhalter ändern

Standardmäßig ist PinInput -Platzhalter (○), Sie können dies ändern, wenn Sie möchten.

Automatisieren und kopieren + einfügen

Versuchen Sie, 1234 in eine der Eingänge zu kopieren und zu fügen.

Standardmäßig können Sie jeweils nur eine Eingabe ändern. Wenn jedoch eines der Eingabefelds eine längere Zeichenfolge empfängt, indem Sie ihn einfügen, versucht PinInput , die Zeichenfolge zu validieren und die anderen Eingänge zu füllen.

Stateful (unkontrollierter) PIN -Eingang

Es gibt auch eine unkontrollierte Version, StatefulPinInput , die einen eigenen Staat verwaltet. Die Standardeingangslänge für diese Komponente beträgt vier, aber Sie können diese ändern, indem Sie die Anzahl an length der Prop übergeben. ASLO Sie können initialValue als Anfangswert für StatefulPinInput übergeben.

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

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

API

PinInput -Requisiten

Name (*erforderlich)	Typ	Standard	Beschreibung
Aria-beschrieben	Saite		Legt das Aria-beschriebene Attribut fest.
Aria-Label	Saite	"Bitte geben Sie den PIN -Code ein"	Legt das Aria-Label-Attribut fest.
Aria-markiert	Saite		Legt das Attribut von Aria-markiert.
automatisch vervollständigt	Saite	"aus"	Bestimmt, ob Browser Wertvorschläge liefern sollte.
Autofokus	boolean	FALSCH	Wenn wahr, wird der Eingang auf den ersten Berg konzentriert.
Autotab	boolean	WAHR	Wenn der wahre Fokus automatisch auf die nächste/vorherige Eingabe wechselt, sobald sie gefüllt oder gelöscht werden
BorderColor	Saite	RGB (204, 204, 204)	Lassen Sie Sie die Randfarbe anpassen, wenn die Eingabe nicht fokussiert ist.
ERRORBORDERCOLOR	Saite	RGB (220,53,69)	Lassen Sie Sie die Randfarbe anpassen, wenn die Eingabe ungültig ist.
FocusBorderColor	Saite	RGB (13.110.253)	Lassen Sie Sie die Randfarbe anpassen, wenn die Eingabe fokussiert ist.
validBorderColor	Saite	RGB (25.135,84)	Lassen Sie Sie die Randfarbe anpassen, wenn die Eingabe gültig ist.
deaktiviert	boolean		Renders Komponenten im behinderten Zustand.
Format	(Zeichen: String) => String		Reine Funktion zur Transformation der Roheingabe.
Ausweis	Saite		Der ID -Attributwert, der dem Eingabeelement und als Beschriftung für den Attributwert hinzugefügt werden soll.
inputMode	Saite		Mit diesem Attribut kann ein Browser eine geeignete virtuelle Tastatur anzeigen. ( HINWEISE `type` PROP ermittelt die entsprechende `inputMode` automatisch. Wenn Sie `inputMode` Prop bestanden, wird ein integriertes `inputMode` überschrieben.)
Maske	boolean	FALSCH	Verhindern, dass der PIN -Code angezeigt wird
Name	Saite		Namensattribut.
Onblur	(Ereignis: react.focusevent) => void		Genannte Onblur -Ereignisauslöser.
aufchange	(Wert: String \| String [], Index: Nummer, Werte: String []) => void		Aufgerufen, wenn der Eingabwert geändert wird.
aufkommen	(Werte: String []) => void		Aufgerufen, wenn alle Eingaben ausgefüllt und validiert werden
Onfokus	(Ereignis: react.focusevent) => void		Das Onfocus -Ereignis ausgelöst.
Onkeydown	(Ereignis: React.KeyboardEvent) => void		Das OneKeydown -Ereignis bezeichnet.
Platzhalter	Saite	"O"	Angezeigt, wenn der PIN -Code noch nicht eingegeben wird.
erforderlich	boolean		Renders Komponenten im erforderlichen Zustand.
Showstate	boolean	WAHR	Bestimmen Sie, ob gültiger/ungültiger Rand angezeigt wird oder nicht.
Größe	"xs" \| "sm" \| "MD" \| "LG"	"MD"	Die Komponenten in der vorgesehenen Größe rendern.
Containerklassename	Saite		Mit können Sie benutzerdefinierte Klasse an Containerelement anhängen.
Container	Objekt	{}	Sie können das Containerelement anpassen.
inputClassName	Saite		Mit können Sie benutzerdefinierte Klasse an das Eingabelement anhängen.
Inputstyle	Objekt	{}	Sie können das Eingabeelement anpassen.
Typ	"Nummer" \| "Text"	"Nummer"	Die Art der Werte, die der Pin-Input zulassen sollte
bestätigen	String \| String [] \| Regexp		Ein regulärer Ausdruck, mit dem der Wert der Eingabe übereinstimmt, damit der Wert die Validierung der Einschränkung übergeben muss.
Werte(*)	String []		PinInput -Wertattribut.