ScreenSteppers
Orquestra as telas de um fluxo em etapas. Guarda a etapa atual num contexto, desenha o StepperProgress no topo e entrega avançar, voltar e ir para etapa pelo hook useScreenSteppers. Ao trocar de etapa, o foco vai para o conteúdo novo.
Fluxo do signatário
Conferir dados, ler o documento, tirar selfie e assinar. As etapas concluídas no topo são clicáveis.
Confira seus dados
Marina Couto enviou o contrato de locação para você assinar.
Cabeçalho forçado
forceLayout fixa o cabeçalho em linha (mobile) ou empilhado (desktop), independente da largura da tela. No mobile os nomes das etapas somem.
Tire uma selfie
Ela entra no relatório de evidências e confirma que é você quem assina.
Uso
<ScreenSteppers totalSteps={4} steps={["Conferir dados", "Ler o documento", "Tirar selfie", "Assinar"]}>
<SignerFlow />
</ScreenSteppers>
function SignerFlow() {
const { currentStep, nextStep, prevStep } = useScreenSteppers();
if (currentStep === 1) return <ScreenStep title="Confira seus dados" actions={{ onNext: nextStep }} />;
}Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| totalSteps | number | — | Quantidade de etapas. |
| initialStep | number | 1 | Etapa inicial, contada a partir de 1. |
| steps | string[] | — | Nomes das etapas para o StepperProgress. |
| brand | ReactNode | — | Marca ou ícone ao lado do indicador. |
| label | string | — | Nome acessível do indicador de etapas. |
| onStepChange | (step: number) => void | — | Chamado a cada troca de etapa. |
| forceLayout | "mobile" | "desktop" | — | Fixa o arranjo do cabeçalho. |
| mapDisplayStep | (current, total) => { current, total } | — | Converte a etapa lógica na exibida, quando há etapas ocultas. Desliga o clique nas etapas. |
useScreenSteppers
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| currentStep | number | — | Etapa atual. |
| totalSteps | number | — | Total de etapas. |
| nextStep / prevStep | () => void | — | Avança ou volta uma etapa, sem passar dos limites. |
| goToStep | (step: number) => void | — | Vai direto para uma etapa. |
| isFirstStep / isLastStep | boolean | — | Indica as pontas do fluxo. |