PinPad

A component used to authenticate or identify individuals through a standarized number pad.

const onPinSubmit = (pin: number[]): Promise<PinValidationResult> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const isPinValid =
        pin.length === 6 && pin.every((digit, index) => digit === index + 1);
      const result: PinValidationResult = isPinValid ? 'accept' : 'reject';
      resolve(result);
    }, 1000);
  });
};

PinPad

PinPadProps

label

The content for the prompt on the pin pad.

masked

Whether the entered PIN should be masked.

maxPinLength

The maximum length of the PIN.

minPinLength

The minimum length of the PIN.

onPinEntry

The function to be called when a PIN is entered.

onSubmit

The function to be called when the PIN is submitted.

pinPadAction

The call to action between the entry view and the keypad, consisting of a label and function that returns the pin.

PinLength

4 | 5 | 6 | 7 | 8 | 9 | 10

PinValidationResult

'accept' | 'reject'

PinPadActionType

label

The label for the action button.

onPress

The function to be called when the action button is pressed.