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

``bash
npm install react-codepicker
`

Alternativ mit yarn:

`bash
yarn add react-codepicker
`

Verwendung

`tsx
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 (
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:

`css
.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