Formik parte 1— Construa formulários em React, sem lágrimas
Recentemente, depois de apanhar — e continuar apanhando — de alguns forms em React mais complexos, decidi dedicar um tempo a esse carinha que dá titulo ao artigo, o Formik. Pra quem ainda não conhece, é uma lib que facilita o manuseio de formulários em React, desde os mais simples até os mais complexos (esses por sua vez, são os que estou estudando). Com esse artigo, darei uma introdução sobre seu uso e seus métodos. Tentarei repassar o que já aprendi. Futuramente, farei uma série com exemplos mais complexos, como handle de erros e integração com componentes de terceiros :)
Ele também funciona muito bem com React Native!
Caso você conheça o Redux Form, que é uma opção mais famosa, da uma lida aqui pra ver o motivo de não utilizá-lo :)
Aqui você pode ver como fica, na prática:
Para instalar basta usar:
npm install formik --save
ou
yarn add formik
Uma vez instalado, vamos para os exemplos e comparações.
Caso você já tenha feito algo com o React, seria um código mais ou menos assim:
Até aqui beleza, nada fora do comum.
Mas aí, você tem dados no form que são aninhados, algo do tipo user.address.city
. Nesse caso, começa a azedar:
Agora começa a complicar um pouco né? Isso sem falar das tratativas de erro, validações e afins.
A diante, o mesmo exemplo usando o Formik
Mais um detalhe: Toda a manipulação do form é feita via props, ou seja, o form é naturalmente um stateful component !
Simples, não?! Algumas explicações:
- Obrigatoriamente, o componente deve estar dentro do HoC
withFormik
- O
mapPropsToValues
funciona como os valores iniciais - Ao encapsular o formulário usando a tag
Form
do Formik, ele automagicamente já sabe que terá que rodar o handleSubmit - Para fazer os binds corretamente, deve-se usar o componente
Field
, e a única prop obrigatória é aname
, que será vinculada com o valor homônimo domapPropsToValues
- Você pode usar o caminho de um
object
direto noname
ex:address.city.name
que o bind será feito, sem nenhum erro \o - Caso você use um componente de terceiros, como o Semantic-UI, É possível usá-lo assim:
Esse foi um exemplo bem simples (posso fazer outros mais complexos :D) da utilização dessa ferramenta. Existe mais inúmeras facilidades que ela nos fornece, como error handlers, validar se campos foram “tocados” (`onBlur`) e não preenchidos, se o formulário como um todo ainda está intacto ou algum campo já foi alterado, habilitar a validação dos campos nos eventos de onChange e/ou onBlur
, reiniciar os campos do form com a chamada do método resetForm()
, validações de schema com o Yup , entre outras opções!
Dê uma olhada na documentação, é bem simples e fácil de ler :)
Qualquer dúvida estou a disposição!
[EDIT]