AIDE SUR LES NœUDS

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

Publié 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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install react-hook-form @or yarn add react-hook-form

VB C#

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";

import
If True Then
	useForm
End If
from "react-hook-form"

VB C#

Initialiser le crochet :

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

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

'INSTANT VB TODO TASK: The following line could not be converted:
const
'INSTANT VB TODO TASK: The following line could not be converted:
	register, handleSubmit, formState:
	If True Then
		errors
	End If
} = useForm()

VB C#

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>
  );
}

Private Function RegistrationForm() As [function]
'INSTANT VB TODO TASK: The following line could not be converted:
  const
  If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	  register, handleSubmit, formState:
'	  {
'		  errors
'	  }
  } = useForm()
  const onSubmit = Sub(data)
	console.log(data)
  End Sub
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: 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>);
  Return (<form onSubmit={handleSubmit(onSubmit)}> (Of div) (Of label) First Name</label> {errors.firstName AndAlso (Of span) This TypeOf field Is required</span>} </div> (Of div) (Of label) Last Name</label> {errors.lastName AndAlso (Of span) This TypeOf field Is required</span>} </div> (Of div) (Of label) Email</label> {errors.email AndAlso (Of span) Invalid email address</span>} </div> </form>)
  End If

VB C#

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>
  );
}

import
If True Then
	TextField, Button
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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>); }

VB C#

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>
  );
}

Private Function CustomValidationForm() As [function]
'INSTANT VB TODO TASK: The following line could not be converted:
  const
  If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	  register, handleSubmit, formState:
'	  {
'		  errors
'	  }
  } = useForm()
  const onSubmit = Sub(data)
	console.log(data)
  End Sub
'INSTANT VB WARNING: Instant VB cannot determine whether both operands of this division are integer types - if they are then you should use the VB integer division operator:
  Return (<form onSubmit={handleSubmit(onSubmit)}> (Of div) (Of label) Username</label> <input {...register("username", { required:= "Username is required", validate:= Function(value) value <>= "admin" "Username cannot be 'admin'" })} /> {errors.username AndAlso (Of span){errors.username.message}</span>} </div> </form>)
  End If

VB C#

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 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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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"

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-@next-app@latest reacthookform-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

VB C#

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

cd reacthookform-pdf

cd reacthookform-pdf

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd reacthookform-pdf

VB C#

Installez les paquets nécessaires :

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64 yarn add -D prettier

VB C#

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();
  }
}

' pages/api/pdf.js
import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your license"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'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();
'  }
'}

VB C#

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>
  );
}

Private Head As import
Private styles As import
'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
	useState
End If
from "react"
import
If True Then
	useForm
End If
from "react-hook-form"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'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>);
'}

VB C#

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";

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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.

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

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