Normalmente ao criar uma aplicação em React, precisamos gerar algum tipo de formulário para uso do usuário, e em sua maior parte não é uma tarefa difícil. Entretanto, existem algumas ferramentas que auxiliam na criação de formulários com diversas funções, com menos esforço. No artigo de hoje veremos o uso prático de uma biblioteca chamada: React Hook Form.
o React Hook Form é uma biblioteca excelente para gerenciamento de formulários em React, permitindo que desenvolvedores construam formulários eficientes, flexíveis e escaláveis com menos código. No entanto essa ferramenta foi criada para ser usada no React "puro". Como usá-lo no React Native?
Instalando React Hook Form -
Antes de começar, é necessário instalar a biblioteca React Hook Form no seu projeto React Native. Para isso, abra o terminal e navegue até a pasta do seu projeto e execute o seguinte comando:
npm install react-hook-form
yarn add react-hook-form
No caso que tal usar como base a forma "tradicional de criação de um formulário, para após isso incrementar aos poucos o React Hook Form, até para seja perceptível a mudança acontecendo de maneira dinâmica.
import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableOpacity} from 'react-native';
export function App(){
const [userName, setUserName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
function signIn(){
const data = {
username,
email,
password
}
console.log(data)
}
return (
<View style = {style.container}>
<Text style = {style.title}> Bem vindo(a) <Text/>
<TextInput
style = {style.input}
onChangeText = {setUserName}
value = {userName}
placeholder= 'Digite aqui seu nome:'
/>
<TextInput
style = {style.input}
onChangeText = {setEmail}
value = {email}
placeholder= 'Digite aqui seu email:'
/>
<TextInput
style = {style.input}
onChangeText = {setPassword}
value = {password}
placeholder= 'Digite aqui sua senha:'
/>
<TouchableOpacity style = {style.button} onPress ={signIn}>
<Text style = {style.buttonText}> Acesse: </Text>
</TouchableOpacity>
</View>
.........
)
}
//estilização será ignorada
Acima temos um exemplo clássico de Formulário. Seu racioncínio é simples:
Façamos um upgrade do que já se tem para utilizar a biblioteca React Hook Form:
import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableOpacity} from 'react-native';
import {useForm, Controller } from 'react-hook-form';
export function App(){
const {control, handleSubmit, formState: {errors} } = useForm({})
function signIn(data){
Alert.alert(data);
}
return (
<View style = {style.container}>
<Text style = {style.title}> Bem vindo(a) <Text/>
<Controller
control = {control}
name = 'username'
render = {({ field: {onChange, value}}) => (
<TextInput
style = {style.input}
onChangeText = {onChange}
value = {value}
placeholder= 'Digite aqui seu nome:'
/>
)}
/>
<Controller
control = {control}
name = 'email'
render = {({ field: {onChange, value}}) => (
<TextInput
style = {style.input}
onChangeText = {onChange}
value = {value}
placeholder= 'Digite aqui seu email:'
/>
)}
/>
<Controller
control = {control}
name = 'password'
render = {({ field: {onChange, value}}) => (
<TextInput
style = {style.input}
onChangeText = {onChange}
value = {value}
placeholder= 'Digite aqui seu password:'
secureTextEntry ={true}
/>
)}
/>
<TouchableOpacity style = {style.button} onPress ={handleSubmit(signIn)}>
<Text style = {style.buttonText}> Acesse: </Text>
</TouchableOpacity>
</View>
.........
)
}
//estilização será ignorada
No caso acima, nós já estamos devolvendo o resultado digitado como objeto, e também suas propriedades, diferente do que seria, utilizando a formulação de formulários simples.
O componente usa o pacote 'react-hook-form' para gerenciar o estado do formulário. Quando o usuário clica no botão, a função "handleSubmit" é chamada para enviar os dados do formulário e a função "signIn" é chamada para lidar com os dados do formulário enviados.
O componente usa a função "useState" do React para definir o estado inicial do formulário como um objeto vazio. Em seguida, usa o hook "useForm" do pacote 'react-hook-form' para criar o objeto "control" e a função "handleSubmit" para gerenciar o estado do formulário e lidar com o envio do formulário. A propriedade "formState: {errors}" é usada para gerenciar os erros de validação do formulário.
Os campos de entrada são criados usando o componente "Controller" do 'react-hook-form'. Cada campo de entrada tem um nome ('username', 'email' e 'password'), um objeto "field" com as propriedades "onChange" e "value" para gerenciar o estado do campo de entrada e um componente "TextInput" que permite que o usuário digite texto e interaja com o campo.
O botão de envio é criado usando o componente "TouchableOpacity" do React Native. Quando o usuário clica no botão, a função "handleSubmit" é chamada e envia os dados do formulário para a função "signIn". A função "signIn" é responsável por lidar com os dados do formulário enviados, como autenticar o usuário ou mostrar uma mensagem de erro se o formulário não estiver preenchido corretamente.
Espero que esse artigo tenha lhe ajudado a ver outras oportunidase e que até mesmo criações de formulário podem ser mais otimizadas e dinâmicas hoje em dia. Outras configurações como adição de validação e até mesmo configurações para impedir que nomes ou emails vazios sejam alertados, podem ficar para sua própria caracterização. Porém com essa base já conseguimos compreender como essa biblioteca é vasta e pode ser usada em projetos muito mais complexos.
Top comments (0)