A configurable PIN/code input component for React
npm install @berlinsms/react-codepickerEin 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.
``bash`
npm install react-codepicker
Alternativ mit yarn:
`bash`
yarn add react-codepicker
`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 (
allowedChars="0123456789"
digitClassNames="custom-digit-style"
onComplete={handleComplete}
onRevokeComplete={handleRevokeComplete}
/>
);
}
`
| 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 |
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.
- 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
MIT