@berlinsms/react-codepicker/readme.md

A configurable PIN/code input component for React

# 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 (
    <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:

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