@berlinsms/react-codepicker

react-codepicker

Ein konfigurierbarer Code-/PIN-Eingabe-Component für React.

Dieser Component ist besonders geeignet für Anwendungsfälle wie Zwei-Faktor-Authentifizierung, PIN-Abfragen oder Zugangscode-Eingaben.

Installation

npm install react-codepicker

Alternativ mit yarn:

yarn add react-codepicker

Verwendung

import React from 'react';
import CodePicker from 'react-codepicker';
import 'react-codepicker/dist/react-codepicker.css';

function MyComponent() {
  const handleComplete = (code: string) => {
    console.log('Eingegebener Code:', code);
  };

  const handleRevokeComplete = (code: string) => {
    console.log('Not  Complete anymore. Wait for input.');
  };

  return (
    <CodePicker
      lengthChars={6}
      allowedChars="0123456789"
      digitClassNames="custom-digit-style"
      onComplete={handleComplete}
      onRevokeComplete={handleRevokeComplete}
    />
  );
}

Komponenten-Parameter

Prop	Typ	Standardwert	Beschreibung
digitClassNames	string	"code-picker-digit"	CSS-Klassenname für jedes Eingabefeld
lengthChars	number	6	Anzahl der Eingabefelder
allowedChars	string	"0123456789"	Zulässige Zeichen für die Eingabe
onComplete	(code: string) => void	() => {}	Callback, der aufgerufen wird, sobald alle Felder ausgefüllt sind
onRevokeComplete	() => void	() => {}	Callback, der aufgerufen wird, wenn nachträglich wieder ein Feld geleert wird

Styling

Die Komponente erfordert CSS für das Layout der Eingabefelder. Eine Beispiel-Definition ist in react-codepicker.css enthalten:

.code-picker-digit {
  width: 2rem;
  height: 2.5rem;
  margin: 0.25rem;
  text-align: center;
  font-size: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Diese Styles können individuell angepasst oder ersetzt werden.

Funktionen

• Automatischer Fokuswechsel beim Tippen
• Navigation mit Pfeiltasten
• Rückwärtslöschen bei leerem Feld
• Filterung unerlaubter Eingaben
• Frei konfigurierbar durch Props
• Keine externen Abhängigkeiten für State-Management

Lizenz

MIT