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