Version 1.2.1 🚀

Novedades de la Versión 1.2.1

• Declaración de Variables de Entorno en la Nube: Se ha añadido la capacidad de declarar variables de entorno directamente en la nube, permitiendo una configuración más flexible y segura de la aplicación.

• Función de Validación Mejorada: La función ha sido optimizada para manejar múltiples tipos de validaciones, incluyendo:

  • Validaciones de longitud mínima y máxima.
  • Validaciones de patrones de expresión regular.
  • Coincidencias entre campos.
  • Mensajes de error personalizados para cada regla.

• Obtención de Variables de Entorno: Se implementó la función para facilitar la obtención de variables de entorno, permitiendo la configuración de la URL base de la API.

• Integración con useHttpRequest: useTargetHandler ahora se integra de manera más efectiva con el hook useHttpRequest, permitiendo realizar llamadas a la API directamente desde el formulario y gestionar las respuestas adecuadamente.

Ejemplo de Uso

Aquí tienes un ejemplo de cómo usar useTargetHandler con useHttpRequest:

import React from "react";
import useTargetHandler from "./path/to/useTargetHandler"; // Asegúrate de que la ruta sea correcta

const UserForm = () => {
  const {
    target,
    handleTarget,
    handleSubmit,
    errors,
    { apiCall, apiResponse, userFound, error },
  } = useTargetHandler(
    { nombre: "", apellido: "" }, // Valores iniciales del formulario
    {
      nombre: { required: true, requiredMessage: "El nombre es obligatorio" },
      apellido: {
        required: true,
        pattern: /^[a-zA-Z]+$/,
        patternMessage: "El apellido solo debe contener letras",
      },
    },
    "local", // Tipo de almacenamiento
    "formData" // Clave para el almacenamiento
  );

  const onSubmit = async (data) => {
    try {
      // Realiza la llamada a la API
      await apiCall("/users", undefined, data, "post", "application/json");
      if (userFound) {
        console.log("Usuario creado:", apiResponse);
      } else {
        console.error("Error al crear usuario:", error);
      }
    } catch (err) {
      console.error("Error en la llamada a la API:", err);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="nombre">Nombre:</label>
        <input
          type="text"
          name="nombre"
          value={target.nombre}
          onChange={handleTarget}
          placeholder="Nombre"
        />
        {errors.nombre && <span>{errors.nombre.message}</span>}
      </div>

      <div>
        <label htmlFor="apellido">Apellido:</label>
        <input
          type="text"
          name="apellido"
          value={target.apellido}
          onChange={handleTarget}
          placeholder="Apellido"
        />
        {errors.apellido && <span>{errors.apellido.message}</span>}
      </div>

      <button type="submit">Enviar</button>
    </form>
  );
};

export default UserForm;