VOOZH about

URL: https://ironpdf.com/nodejs/blog/node-help/react-hook-form-npm/

⇱ react hook form NPM (How It Works For Developers)

Skip to footer content
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blog
  3. Node Help
  4. react hook form NPM
NODE HELP

react hook form NPM (How It Works For Developers)

React Hook Form is a powerful and efficient library for managing form values in React applications. It leverages React hooks to provide a seamless and performant experience without any controller component. In this article, we’ll explore the basics of React Hook Form submission with custom error messages, its benefits, and provide code examples to help you get started.

Why Use React Hook Form?

  1. Performance: React Hook Form uses uncontrolled components and native HTML inputs, reducing the number of re-renders and improving performance.
  2. Simplicity: The API is intuitive and easy to use, requiring fewer lines of code than other form libraries.
  3. Flexibility: It supports complex React Hook Form validation, constraint-based validation API, and integrates well with UI libraries.

Installation

To install React Hook Form, run the following command:

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

Basic Usage

Let’s create a simple registration form without a controlled component and child component using the React Hook Form.

  1. Import the useForm Hook:
import { useForm } from "react-hook-form";
import { useForm } from "react-hook-form";
JAVASCRIPT
  1. Initialize the Hook:
const { register, handleSubmit, formState: { errors } } = useForm();
const { register, handleSubmit, formState: { errors } } = useForm();
JAVASCRIPT
  1. Create the Form with Input Fields and Error Handling:
function RegistrationForm() {
 const { register, handleSubmit, formState: { errors } } = useForm();

 // Function to handle form submission
 const onSubmit = (data) => {
 console.log(data);
 };

 return (
 <form onSubmit={handleSubmit(onSubmit)}>
 <div>
 <label>First Name</label>
 <input {...register("firstName", { required: true })} />
 {errors.firstName && <span>This field is required</span>}
 </div>
 <div>
 <label>Last Name</label>
 <input {...register("lastName", { required: true })} />
 {errors.lastName && <span>This field is required</span>}
 </div>
 <div>
 <label>Email</label>
 <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
 {errors.email && <span>Invalid email address</span>}
 </div>
 <button type="submit">Submit</button>
 </form>
 );
}
function RegistrationForm() {
 const { register, handleSubmit, formState: { errors } } = useForm();

 // Function to handle form submission
 const onSubmit = (data) => {
 console.log(data);
 };

 return (
 <form onSubmit={handleSubmit(onSubmit)}>
 <div>
 <label>First Name</label>
 <input {...register("firstName", { required: true })} />
 {errors.firstName && <span>This field is required</span>}
 </div>
 <div>
 <label>Last Name</label>
 <input {...register("lastName", { required: true })} />
 {errors.lastName && <span>This field is required</span>}
 </div>
 <div>
 <label>Email</label>
 <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
 {errors.email && <span>Invalid email address</span>}
 </div>
 <button type="submit">Submit</button>
 </form>
 );
}
JAVASCRIPT

Output

👁 react hook form NPM (How It Works For Developers): Figure 1 - Registration Form Output

Advanced Usage

React Hook Form supports more advanced use cases, such as integrating with third-party UI libraries and custom validation.

  1. Integrating with Material-UI:
import { TextField, Button } from '@material-ui/core';
import { useForm, Controller } from 'react-hook-form';

function MaterialUIForm() {
 const { control, handleSubmit } = useForm();

 // Function to handle form submission
 const onSubmit = (data) => {
 console.log(data);
 };

 return (
 <form onSubmit={handleSubmit(onSubmit)}>
 <Controller
 name="firstName"
 control={control}
 defaultValue=""
 // Using Material-UI's TextField as a controlled component
 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();

 // Function to handle form submission
 const onSubmit = (data) => {
 console.log(data);
 };

 return (
 <form onSubmit={handleSubmit(onSubmit)}>
 <Controller
 name="firstName"
 control={control}
 defaultValue=""
 // Using Material-UI's TextField as a controlled component
 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

Output

👁 react hook form NPM (How It Works For Developers): Figure 2 - Material UI Form Output

  1. Custom Validation:
function CustomValidationForm() {
 const { register, handleSubmit, formState: { errors } } = useForm();

 // Function to handle form submission
 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>
 <button type="submit">Submit</button>
 </form>
 );
}
function CustomValidationForm() {
 const { register, handleSubmit, formState: { errors } } = useForm();

 // Function to handle form submission
 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>
 <button type="submit">Submit</button>
 </form>
 );
}
JAVASCRIPT

Output

👁 react hook form NPM (How It Works For Developers): Figure 3 - Custom Validation Form Output

Introduction to IronPDF

👁 react hook form NPM (How It Works For Developers): Figure 4 - IronPDF

IronPDF for Node.js is a popular PDF document generation library for generating, editing, and converting PDFs. The IronPDF package is specifically designed for Node.js applications. Here are some key features and details about the IronPDF NPM package.

Key Features

URL to PDF Conversion

Generate PDF docs directly from URLs, allowing you to capture the content of web pages and save them as PDF files programmatically.

HTML to PDF Conversion

Convert HTML content into PDF documents effortlessly. This feature is particularly useful for generating dynamic PDFs from web content.

PDF Manipulation

Merge, split, and manipulate existing PDF documents with ease. IronPDF provides functionalities such as appending pages, splitting documents, and more.

PDF Security

Secure your PDF documents by encrypting them with passwords or applying digital signatures. IronPDF offers options to protect your sensitive documents from unauthorized access.

High-Quality Output

Produce high-quality PDF documents with precise rendering of text, images, and formatting. IronPDF ensures that your generated PDFs maintain fidelity to the original content.

Cross-Platform Compatibility

IronPDF is compatible with various platforms, including Windows, Linux, and macOS, making it suitable for a wide range of development environments.

Simple Integration

Easily integrate IronPDF into your Node.js applications using its npm package. The API is well-documented, making it straightforward to incorporate PDF generation capabilities into your projects.

Installation

To install the IronPDF NPM package, use the following command:

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

Generate PDF Document Using IronPDF and Use Prettier NPM package

Install Dependencies: First, create a new Next.js project (if you haven’t already) using the following command. Refer to the Next.js setup page

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

Next, navigate to your project directory:

cd reacthookform-pdf
cd reacthookform-pdf
SHELL

Install the required packages:

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
SHELL

Create a PDF

Now, let’s create a simple example of generating a PDF using IronPDF.

PDF Generation API: The first step is to create a backend API to generate the PDF document. Since IronPDF only runs server side, we need to create an API to call when a user wants to generate a PDF. Create a file in the path pages/api/pdf.js and add the below contents.

IronPDF requires a license key, you can get it from the license page and place it in the below code.

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

 // Define HTML content for the PDF
 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>";

 // Generate PDF from HTML
 const pdf = await PdfDocument.fromHtml(content);
 const data = await pdf.saveAsBuffer();

 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;

 // Define HTML content for the PDF
 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>";

 // Generate PDF from HTML
 const pdf = await PdfDocument.fromHtml(content);
 const data = await pdf.saveAsBuffer();

 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

Now modify the index.js.

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React from "react";
import { useForm } from "react-hook-form";

export default function Home() {
 const { register, handleSubmit, formState: { errors } } = useForm();

 // Handle form submission to generate PDF
 const onSubmit = (data) => {
 generatePdf(data);
 };

 // Function to generate PDF by calling the backend API
 const generatePdf = async (data) => {
 try {
 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);
 }
 };

 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>
 <input {...register("firstName", { required: true })} />
 {errors.firstName && <span>This field is required</span>}
 </div>
 <div>
 <label>Last Name</label>
 <input {...register("lastName", { required: true })} />
 {errors.lastName && <span>This field is required</span>}
 </div>
 <div>
 <label>Email</label>
 <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
 {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 from "react";
import { useForm } from "react-hook-form";

export default function Home() {
 const { register, handleSubmit, formState: { errors } } = useForm();

 // Handle form submission to generate PDF
 const onSubmit = (data) => {
 generatePdf(data);
 };

 // Function to generate PDF by calling the backend API
 const generatePdf = async (data) => {
 try {
 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);
 }
 };

 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>
 <input {...register("firstName", { required: true })} />
 {errors.firstName && <span>This field is required</span>}
 </div>
 <div>
 <label>Last Name</label>
 <input {...register("lastName", { required: true })} />
 {errors.lastName && <span>This field is required</span>}
 </div>
 <div>
 <label>Email</label>
 <input {...register("email", { required: true, pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
 {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

Code Explanation

  1. Create a React forms view to take in first name, last name, and email using the React Hook Form library.
  2. Create an API to accept the user input and generate the PDF using the IronPDF library.
  3. In the index.js file, when the user clicks the submit button, the "Generate PDF" button calls the backend API to generate a PDF.

Output

PDF

👁 react hook form NPM (How It Works For Developers): Figure 5 - PDF Output

IronPDF License

The IronPDF npm package runs on a license key for each user. IronPDF offers a free-trial license to allow users to check out its extensive features before purchase.

Place the license key here before using the IronPDF package:

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 is a versatile and efficient library for handling forms in React. Its simplicity, performance, and flexibility make it a great choice for both simple and complex forms. Whether you’re building a small project or a large application, React Hook Form can help you manage your forms with ease. IronPDF stands out as a robust solution for .NET developers needing to work with PDF documents programmatically. With its extensive feature set, including PDF creation from various formats, manipulation capabilities like merging and editing, security options, form creation, and format conversion, IronPDF streamlines the integration of PDF functionality into .NET applications. Its user-friendly API and versatility make it a valuable tool for efficiently managing PDF tasks within development projects.

Full Stack Software Engineer (WebOps)

Darrius Serrant holds a Bachelor’s degree in Computer Science from the University of Miami and works as a Full Stack WebOps Marketing Engineer at Iron Software. Drawn to coding from a young age, he saw computing as both mysterious and accessible, making it the perfect medium for creativity ...

Read More

Related Articles

Updated

next-auth NPM (How It Works For Developers)

NextAuth.js is an open-source authentication library for Next.js applications that provides a flexible and secure way to implement authentication in web apps

Read More

Updated

Koa node js (How It Works For Developers)

Koa.js, a generation web framework for Node.js, excels with its async function support, enabling developers to write asynchronous middleware easily

Read More

Install with npm
Version: 2026.5
 npm i @ironsoftware/ironpdf
  1. Download and install Node.js 12+.
  2. Execute the above command in the terminal.
Licenses from $749

Have a question? Get in touch with our development team.

Now you've installed with NPM
Your browser is now downloading IronPDF

Next step: Start free 30-day Trial

No credit card required

  • Test in a live environment
  • Fully-functional product
  • 24/5 technical support

Thank You

Your trial key should be in the email.
If it is not, please contact
support@ironsoftware.com
Get your free 30-day Trial Key instantly.
Thank you.
If you'd like to speak to our licensing team:
👁 badge_greencheck_in_yellowcircle
The trial form was submitted
successfully.

Your trial key should be in the email.
If it is not, please contact
support@ironsoftware.com

Have a question? Get in touch with our development team.
No credit card or account creation required
Now you've installed with NPM
Your browser is now downloading IronPDF

Next step: Start free 30-day Trial

No credit card required

  • Test in a live environment
  • Fully-functional product
  • 24/5 technical support
Thank you.
View your license options:
Thank you.
If you'd like to speak to our licensing team:
Have a question? Get in touch with our development team.
Have a question? Get in touch with our development team.
👁 Blue key in circle
Get started for FREE
No credit card required
Test in a live environment

Test in production without watermarks.
Works wherever you need it to.

Fully-functional product

Get 30 days of fully functional product.
Have it up and running in minutes.

24/5 technical support

Full access to our support engineering team during your product trial

👁 Grey key in circle
Get started for FREE
The trial form was submitted successfully.
👁 Calendar in circle
Book Free Live Demo
No contact, no card details, no commitments Book a 30-minute, personal demo.
Here's what to expect:

A live demo of our product and its key features

Get project specific feature recommendations

All your questions are answered to make sure you have all the information you need. (No commitment whatsoever.)

👁 Grey key in circle
Book Free Live Demo
Your booking has been completed Check your e-mail for confirmation

Want to deploy IronSuite to a live project for FREE?

What’s included?

  • Test in production without watermarks
  • 30 days fully functional product
  • 24/5 technical support during trial
Need help? Our sales team would be glad to help you.
Try the Enterprise Trial
Get your free 30-day Trial Key instantly.
👁 bullet_checked
No credit card or account creation required
OR
Get your free 30-day Trial Key instantly.
👁 Blue key in circle
No credit card or account creation required
The trial form was submitted successfully.
Thank you for starting a trial

Please check your email for the trial license key.

If you don’t receive an email, please start a live chat or email support@ironsoftware.com

Thank you
Your trial key should be in the email.
If it is not, please contact support@ironsoftware.com
Join Millions of Engineers who’ve tried IronPDF
Your trial key should be in the email.
If it is not, please contact support@ironsoftware.com
Talk to Sales Team

Book a No-obligation Consult

How we can help:
  • Consult on your workflow & pain points
  • See how other companies solve their .NET document needs
  • All your questions answered to make sure you have all the information you need. (No commitment whatsoever.)
  • Get a tailored quote for your project's needs
Get Your No-Obligation Consult

Complete the form below or email sales@ironsoftware.com

Your details will always be kept confidential.

Trusted by Millions of Engineers Worldwide
Book Free Live Demo

Book a 30-minute, personal demo.

No contract, no card details, no commitments.

Here's what to expect:
  • A live demo of our product and its key features
  • Get project specific feature recommendations
  • All your questions are answered to make sure you have all the information you need.
    (No commitment whatsoever.)
CHOOSE TIME
YOUR INFO
Book your free Live Demo

Trusted by Millions of Engineers Worldwide

30-day trial → Full product. No limits. No card.

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me