Formik hooks — API oficial! 🎉

Sim, eu sei que já faz tempo que saiu, mas só agora deu pra escrever o artigo 😰

Se quiser ver todos os artigos de Formik que publiquei, pode começar por aqui: https://medium.com/reactbrasil/formik-construa-formul%C3%A1rios-em-react-sem-l%C3%A1grimas-a80c52887882

Longos dias e belas noites senhores!
Com o lançamento oficial do hook do formik, podemos finalmente fazer um artigo que contemple a API final dos métodos (diferentemente deste artigo que escrevi, que era da versão beta), pois nos “45 do segundo tempo”, houve uma mudança um tanto quanto importante no método getFieldProps()

Nesse rápido artigo, vamos construir um formulário com nome, email, endereço e senha

Sem mais delongas, vamos ao que interessa! 😁

Na instalação, o mesmo esquema de sempre:

yarn add formik

E vamos criar nosso componente:

OBS: Preferi deixar o initialValues e o onSubmit fora do object padrão do formik, para manter uma melhor legibilidade.

Até aqui nada de muito diferente né? Adotando a sintaxe dos hooks + o que era de se esperar do formik, temos essa belezinha ai em cima.

Agora, vamos adicionar a melhor parte dessa versão do formik: getFieldProps

O que esse camarada faz? Isso mesmo, ele “espalha” no componente, o onChange, onBlur, value e name, referente ao campo informado no parâmetro.

E só! 🎉

Depois só precisamos passar o onSubmit para o formulário e temos nosso formik funcionando.

Caso queira brincar um pouco, esse exemplo está no sandbox: