Pin Input

Props

secret : é uma propriedade opcional que indica se o pinInput deve ser visível ou não

incrementIndexStart : propriedade opcional que indica o índice de começo do input, usado quando mais de um pinInput é usado

hasError: propriedade opcional que recebe um boolean de erro

errorMessage : propriedade que indica a string de error

testID : propriedade que recebe uma string para identificação do componente para ser usada no teste

ref : Refs fornecem uma forma de acessar os nós do DOM ou elementos React criados no método render

onChange() : propriedade que recebe uma função para controle de estado do componente

onComplete() : propriedade que recebe uma função para ser executada assim que os blocos do pin são preenchidos

style : permite midifcar o estilo do componente

length : recebe o tamanho do input

keyboardType : define o tipo de teclado a ser exibido no aparelho do Usuário

autoFocus : habilita o autoFocus do componente

import {useRef} from 'react';

import {PinInput} from '@vizir-banking/banking-app-core/dist/fuel-design';

import {CustomRef} from '@vizir-banking/banking-app-core/dist/fuel-design/pin-input/types';

const inputsRefs = useRef<CustomRef>({});

A propriedade de error deve ser validade preferencialmente com um schema de validação, como o Yup.

<PinInput

hasError={!!passwordError}

errorMessage={passwordError}

secret

onComplete={onPasswordFullFill}

length={4}

ref={inputsRefs}

⁠

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.