Implementando Formik y Yup

4/21
Recursos

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Formik y Yup tambien sirven para react web normal, puede que sea un poco complicado a un inicio pero una vez que lo dominas te facilita las validaciones de los formularios

Es súper bueno utilizar librerías de tercerros para hacer este tipo de validaciones, pero recuerden que también pueden crear su propia lógica de obtención de datos y validación de estos.

Les comparto un custom hook para recibir los datos de los inputs y computarlos con sus correspondientes fields (sin Formik).

Screen de ejemplo que implementa el customHook.

const {onChange, form, isSuscribed} = useForm({
   //Este es el objeto que recibirá mi custom hook
    name: '',
    email: '',
    phone: '',
    isSuscribed: false,
  });

	<TextInput
            style={{...styles.textInput, color: colors.text}}
            placeholder="Type your name"
            placeholderTextColor='black'
            autoCapitalize='words'
            onChangeText={(value) => onChange(value, 'name')}
          />
          <TextInput
            style={{...styles.textInput, color: colors.text}}
            placeholder="Type your email"
            placeholderTextColor='black'
            keyboardType="email-address"
            autoCapitalize='none'
            onChangeText={(value) => onChange(value, 'email')}
          />

Custom Hook (con TypeScript) que recibe el objeto y hace la lógica para almacenar el valor con su correspondiente field.
El field no es nada más que el referente a mi input, similar al name de un input en HTML.

import { useState } from "react";

export const useForm = <T extends Object>(form: T) => {

  //console.log("The object is here:", form)

  const [state, setState] = useState(form);

  const onChange = <K extends Object>(value:K, field: keyof T) => {
    setState({
      ...state,
      [field]:value
    })
  }

  return {
    ...state,
    form: state,
    onChange
  }
}

Recomiendo mucho también React hook form, funciona tanto para web como para react native. Buenísimo, se puede aplicar las validaciones y muchas otras herramientas mas.

react-hook-form.com

En vez de usar funciones que devuelve objetos, se pueden usar simplementes objetos y funciona exactamente.

const initialValues = {
  username: "",
  password: "",
}

Comando para instalar Formik y Yup:

yarn add formik yup