AIDE SUR LES NœUDS

react hook form NPM (Comment ça marche pour les développeurs)

Regan Pun

octobre 24, 2024

Introduction

React Hook Form est une bibliothèque puissante et efficace pour gérer les valeurs des formulaires dans les applications React. La traduction doit rester professionnelle et préserver la précision technique tout en expliquant les caractéristiques et les avantages de ces outils de développement. Dans cet article, nous allons explorer les bases de la soumission de formulaire React Hook avec un message d'erreur personnalisé, ainsi que ses avantages, et fournir des exemples de code pour vous aider à démarrer.

Pourquoi utiliser React Hook Form ?

Performances : React Hook Form utilise des composants non contrôlés et des entrées HTML natives, ce qui réduit le nombre de re-rendus et améliore les performances.
Simplicité : L'API est intuitive et facile à utiliser, et nécessite moins de lignes de code que d'autres bibliothèques de formulaires.
Flexibilité : Il prend en charge la validation de formulaire React Hook complexe, l'API de validation basée sur les contraintes et s'intègre bien avec les bibliothèques d'interface utilisateur.

Installation

Pour installer React Hook Form, exécutez la commande suivante :

npm install react-hook-form
or
yarn add react-hook-form

Utilisation de base

Créons un simple formulaire d'inscription sans composant contrôlé ni composant enfant à l'aide de React Hook Form.

Importer le crochet useForm :

import { useForm } from "react-hook-form";

import { useForm } from "react-hook-form";

JAVASCRIPT

Initialiser le crochet :

const { register, handleSubmit, formState: { errors } } = useForm();

const { register, handleSubmit, formState: { errors } } = useForm();

JAVASCRIPT

Créez le formulaire avec une valeur d'entrée et un objet d'erreur pour les échecs de validation :

function RegistrationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
    </form>
  );
}

function RegistrationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
    </form>
  );
}

JAVASCRIPT

Sortie

la traduction doit rester professionnelle et préserver l'exactitude technique tout en expliquant les caractéristiques et les avantages de ces outils de développement : Figure 1 - Sortie du formulaire d'inscription

Utilisation avancée

React Hook Form prend en charge des cas d'utilisation plus avancés, tels que l'intégration avec des bibliothèques d'interface utilisateur tierces et la validation personnalisée.

Intégration avec Material-UI :

import { TextField, Button } from '@material-ui/core';
import { useForm, Controller } from 'react-hook-form';
function MaterialUIForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="First Name" />}
      />
      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="Last Name" />}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

import { TextField, Button } from '@material-ui/core';
import { useForm, Controller } from 'react-hook-form';
function MaterialUIForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="First Name" />}
      />
      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="Last Name" />}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

JAVASCRIPT

sortie

react hook form NPM(Comment ça marche pour les développeurs) : Figure 2 - Sortie du formulaire Material UI

Validation personnalisée :

function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Username</label>
        <input {...register("username", { 
          required: "Username is required", 
          validate: value => value !== "admin" 
 "Username cannot be 'admin'" 
        })} />
        {errors.username && <span>{errors.username.message}</span>}
      </div>
    </form>
  );
}

function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Username</label>
        <input {...register("username", { 
          required: "Username is required", 
          validate: value => value !== "admin" 
 "Username cannot be 'admin'" 
        })} />
        {errors.username && <span>{errors.username.message}</span>}
      </div>
    </form>
  );
}

JAVASCRIPT

Sortie

react hook form NPM(Comment ça marche pour les développeurs) : Figure 3 - Sortie d'un formulaire de validation personnalisé

Introduction à IronPDF

react hook form NPM(Comment cela fonctionne-t-il pour les développeurs ?) : Figure 4 - IronPDF

IronPDF for Node.js est une bibliothèque populaire de génération de documents PDF qui permet de générer, d'éditer et de convertir des PDF. Le package IronPDF est spécifiquement conçu pour les applications Node.js. Voici quelques caractéristiques et détails clés concernant le paquetage IronPDF NPM.

Caractéristiques principales

Conversion d'URL en PDF

Générer des documents PDF directement à partir d'URL, vous permettant de capturer le contenu de pages web et de les enregistrer en tant que fichiers PDF de manière programmatique.

Conversion de HTML en PDF

Convertissez sans effort du contenu HTML en documents PDF. Cette fonction est particulièrement utile pour générer des PDF dynamiques à partir de contenus web.

Manipulation des PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF offre des fonctionnalités telles que l'ajout de pages, la division de documents, etc.

Sécurité PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre les accès non autorisés.

Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, notamment Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple

Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API est bien documentée, ce qui facilite l'intégration des capacités de génération de PDF dans vos projets.

Installation

Pour installer le paquetage NPM IronPDF, utilisez la commande suivante :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

Générer un document PDF à l'aide d'IronPDF et utiliser le package NPM Prettier

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js(si vous ne l'avez pas encore fait) à l'aide de la commande suivante. Se référer à laPage d'installation de Next.js

npx create-next-app@latest reacthookform-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Ensuite, accédez au répertoire de votre projet :

cd reacthookform-pdf

Installez les paquets nécessaires :

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add -D prettier

Créer un PDF

Maintenant, créons un exemple simple de génération d'un PDF à l'aide d'IronPDF.

API de génération de PDF : La première étape consiste à créer une API pour générer le document PDF. Comme IronPDF ne fonctionne que côté serveur, nous devons créer une API à appeler lorsqu'un utilisateur souhaite générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous.

IronPDF nécessite une clé de licence, vous pouvez l'obtenir à partir de la pagepage de licence et le placer dans le code ci-dessous.

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey =   "your license";
export default async function handler(req, res) {
  try {
    const f = req.query.f;
    const l = req.query.l;
    const e = req.query.e;
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>First Name:"+f+"</p>";
    content+="<p>Last Name:"+l+"</p>";
    content+="<p>Email:"+e+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey =   "your license";
export default async function handler(req, res) {
  try {
    const f = req.query.f;
    const l = req.query.l;
    const e = req.query.e;
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>First Name:"+f+"</p>";
    content+="<p>Last Name:"+l+"</p>";
    content+="<p>Email:"+e+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

JAVASCRIPT

Modifiez maintenant le fichier index.js.

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
export default function Home() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    generatePdf(data);
  };
  const generatePdf = async (data) => {
    try {
      console.log("/api/pdf?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const response = await fetch("/api/pdf-html?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>
        <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
      <button type="submit" >Submit and Generate PDF</button>
    </form>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
export default function Home() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    generatePdf(data);
  };
  const generatePdf = async (data) => {
    try {
      console.log("/api/pdf?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const response = await fetch("/api/pdf-html?f=" + data["firstName"]+"&l="+data["lastName"]+"&e="+data["email"]);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>
        <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        {errors.firstName && <span>This field is required</span>}
      </div>
      <div>
        <label>Last Name</label>
        {errors.lastName && <span>This field is required</span>}
      </div>
      <div>
        <label>Email</label>
        {errors.email && <span>Invalid email address</span>}
      </div>
      <button type="submit" >Submit and Generate PDF</button>
    </form>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

JAVASCRIPT

Explication du code

Créez une vue React forms pour saisir le prénom, le nom de famille et l'email à l'aide de la bibliothèque React Hook Form.
Créez une API pour accepter l'entrée de l'utilisateur et générer le PDF à l'aide de la bibliothèque IronPDF.
Dans le fichier index.js, lorsque l'utilisateur clique sur le bouton "Soumettre", le bouton "Générer un PDF" appelle l'API du backend pour générer un PDF.

Sortie

PDF (EN ANGLAIS)

la traduction doit rester professionnelle, en préservant la précision technique tout en expliquant les caractéristiques et les avantages de ces outils de développement : Figure 5 - Sortie PDF

Licence d'IronPDF

IronPDF Le paquet npm fonctionne avec une clé de licence pour chaque utilisateur. IronPDF offre un service deessai gratuit afin de permettre aux utilisateurs de tester ses nombreuses fonctionnalités avant de l'acheter.

Placez la clé de licence ici avant d'utiliser le package IronPdf :

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

JAVASCRIPT

Conclusion

React Hook Form est une bibliothèque polyvalente et efficace pour gérer les formulaires dans React. Sa simplicité, ses performances et sa flexibilité en font un excellent choix pour les formulaires simples et complexes. Que vous construisiez un petit projet ou une grande application, React Hook Form peut vous aider à gérer vos formulaires en toute simplicité. IronPDF le logiciel .NET se distingue comme une solution robuste pour les développeurs .NET qui ont besoin de travailler avec des documents PDF de manière programmatique. Grâce à son vaste ensemble de fonctionnalités, notamment la création de PDF à partir de différents formats, des capacités de manipulation telles que la fusion et l'édition, des options de sécurité, la création de formulaires et la conversion de formats, IronPDF rationalise l'intégration des fonctionnalités PDF dans les applications .NET. Son API conviviale et sa polyvalence en font un outil précieux pour gérer efficacement les tâches PDF au sein des projets de développement.

Regan Pun

Discutez avec l'équipe d'ingénierie maintenant

Ingénieur logiciel

Regan est diplômé de l'université de Reading, où il a obtenu une licence en ingénierie électronique. Avant de rejoindre Iron Software, il s'était concentré sur une seule tâche. Ce qu'il apprécie le plus chez Iron Software, c'est la diversité des tâches qu'il peut accomplir, qu'il s'agisse d'apporter une valeur ajoutée aux ventes, à l'assistance technique, au développement de produits ou à la commercialisation. Il aime comprendre comment les développeurs utilisent la bibliothèque d'Iron Software et utiliser ces connaissances pour améliorer continuellement la documentation et développer les produits.

< PRÉCÉDENT
rxjs NPM (Comment ça marche pour les développeurs)

SUIVANT >
faye NPM (Comment ça marche pour les développeurs)