Altbilgi içeriğine atla
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blogu
  3. Node Yardım
  4. react hook form NPM
NODE YARDıM

react hook form NPM (Geliştiriciler İçin Nasıl Çalışır)

Darrius Serrant
Darrius Serrant
Güncellendi:

React Hook Form, React uygulamalarında form değerlerini yönetmek için güçlü ve verimli bir kütüphanedir. Kontrolcü komponent olmadan kesintisiz ve yüksek performanslı bir deneyim sağlamak için React hook'larını kullanır. Bu yazıda, React Hook Form gönderim işlemi ile özelleştirilmiş hata mesajlarının temelini keşfedecek, faydalarını inceleyecek ve size başlamanız için kod örnekleri sağlayacağız.

Neden React Hook Form Kullanmalısınız?

  1. Performans: React Hook Form, kontrolsüz bileşenler ve yerel HTML girdileri kullanarak yeniden render sayısını azaltır ve performansı artırır.
  2. Basitlik: API sezgisel ve kullanımı kolaydır, diğer form kütüphanelerine göre daha az satır kod gerektirir.
  3. Esneklik: Karmaşık React Hook Form doğrulamasını, kısıtlama tabanlı doğrulama API'sini destekler ve UI kütüphaneleriyle iyi entegre olur.

Kurulum

React Hook Form'u kurmak için aşağıdaki komutu çalıştırın:

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

Temel Kullanımı

React Hook Form kullanarak, kontrol edilen bir bileşen ve çocuk bileşen olmadan basit bir kayıt formu oluşturalım.

  1. useForm Hook'unu İçe Aktarın:
import { useForm } from "react-hook-form";
import { useForm } from "react-hook-form";
JAVASCRIPT
  1. Hook'u Başlatın:
const { register, handleSubmit, formState: { errors } } = useForm();
const { register, handleSubmit, formState: { errors } } = useForm();
JAVASCRIPT
  1. Giriş Alanları ve Hata Yönetimi ile Formu Oluşturun:
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

Çıktı

react hook form NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 1 - Kayıt Formu Çıktısı

Gelişmiş Kullanim

React Hook Form, üçüncü taraf UI kütüphaneleri ile entegrasyon ve özel doğrulama gibi daha gelişmiş kullanım durumlarını destekler.

  1. Material-UI ile Entegrasyon:
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

Çıktı

react hook form NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 2 - Material UI Formu Çıktısı

  1. Özel Doğrulama:
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

Çıktı

react hook form NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 3 - Özel Doğrulama Formu Çıktısı

IronPDF'ye Giriş

react hook form NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 4 - IronPDF

Node.js için IronPDF, PDF belgeleri oluşturma, düzenleme ve dönüştürme için popüler bir kütüphanedir. IronPDF paketi, özellikle Node.js uygulamaları için tasarlanmıştır. IronPDF NPM paketi hakkında bazı temel özellikler ve detaylar.

Ana Özellikler

URL'den PDF'ye Dönüşüm

Web sayfalarının içeriğini yakalamak ve programatik olarak PDF dosyaları olarak kaydetmek için doğrudan URL'lerden PDF belgeleri oluşturun.

HTML'den PDF'ye Dönüşüm

HTML içeriğini kolayca PDF belgelerine dönüştürün. Bu özellik, web içeriğinden dinamik PDF'ler üretmek için özellikle kullanışlıdır.

PDF Manipülasyonu

Mevcut PDF belgelerini kolayca birleştirin, ayırın ve yönetin. IronPDF, sayfa ekleme, belge ayırma gibi işlevler sunar.

PDF Güvenliği

PDF belgelerinizi şifrelerle şifreleyerek veya dijital imzalar uygulayarak güvence altına alın. IronPDF, hassas belgelerinizi yetkisiz erişimden korumak için seçenekler sunar.

Yüksek Kaliteli Çıktı

Metin, resim ve biçimlendirmenin hassas bir şekilde işlendiği yüksek kaliteli PDF belgeleri üretin. IronPDF, oluşturulan PDF'lerin orijinal içeriği korumasını sağlar.

Çapraz Platform Uyumluluğu

IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur, bu da onu geniş bir geliştirme ortamı yelpazesi için uygun kılar.

Basit Entegrasyon

IronPDF'i npm paketi ile Node.js uygulamalarınıza kolayca entegre edin. API iyi belgelenmiştir, bu da projelerinize PDF oluşturma yeteneklerini kolayca eklemenizi sağlar.

Kurulum

IronPDF NPM paketini kurmak için, aşağıdaki komutu kullanın:

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

Prettier NPM Paketi Kullanarak IronPDF ile PDF Belgesi Oluşturun

Bağımlılıkları Yükleyin: İlk olarak, aşağıdaki komutla yeni bir Next.js projesi oluşturun (eğer henüz yapmadıysanız). Next.js kurulum sayfasına başvurun.

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

Sonra, proje dizininize gidin:

cd reacthookform-pdf
cd reacthookform-pdf
SHELL

Gerekli paketleri yükleyin:

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

Bir PDF Oluşturun

Simdi, IronPDF kullanarak bir PDF oluşturmanin basit bir ornegini oluşturalim.

PDF Oluşturma API'si: İlk adım, PDF belgesini oluşturacak bir arka uç API'si yaratmaktır. IronPDF yalnızca sunucu tarafında çalıştığı için, bir kullanıcı PDF oluşturmak istediğinde çağrılacak bir API oluşturmamız gerekiyor. pages/api/pdf.js yolunda bir dosya oluşturun ve aşağıdaki içerikleri ekleyin.

IronPDF bir lisans anahtarı gerektirir, bunu lisans sayfasından alabilir ve aşağıdaki koda yerleştirebilirsiniz.

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

Şimdi index.js üzerinde değişiklik yapın.

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

Kod Açıklaması

  1. React Hook Form kütüphanesini kullanarak ad, soyad ve e-posta almak için bir React form görünümü oluşturun.
  2. Kullanıcı girişini kabul etmek ve IronPDF kütüphanesini kullanarak PDF oluşturmak için bir API oluşturun.
  3. Kullanıcı gönder butonuna tıkladığında, index.js dosyasında "PDF Oluştur" butonu, PDF oluşturmak için arka uç API çağrısı yapar.

Çıktı

PDF

react hook form NPM (Geliştiriciler İçin Nasıl Çalışır): Şekil 5 - PDF Çıktısı

IronPDF Lisansı

IronPDF npm paketi her kullanıcı için bir lisans anahtarı üzerinde çalışır. IronPDF, kullanıcıların satın alma öncesinde geniş özelliklerini kontrol edebilmesi için bir ücretsiz deneme lisansı sunar.

IronPDF paketini kullanmadan önce lisans anahtarını buraya yerleştirin:

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

Sonuç

React Hook Form, React'ta formları yönetmek için çok yönlü ve verimli bir kütüphanedir. Basitliği, performansı ve esnekliği, hem basit hem de karmaşık formlar için harika bir tercih haline getirir. İster küçük bir proje ister büyük bir uygulama geliştirin, React Hook Form formlarınızı kolayca yönetmenizi sağlar. IronPDF programatik olarak PDF belgeleri ile çalışması gereken .NET geliştiricileri için sağlam bir çözüm olarak öne çıkar. Çeşitli formatlardan PDF oluşturma, birleştirme ve düzenleme gibi manipülasyon yetenekleri, güvenlik seçenekleri, form oluşturma ve format dönüşümü dahil geniş özellik setiyle, IronPDF, PDF işlevselliğinin .NET uygulamalarına entegrasyonunu kolaylaştırır. Kullanıcı dostu API'si ve çok yönlülüğü, geliştirme projeleri içinde PDF görevlerini etkin bir şekilde yönetmek için değerli bir araç yapar.

Darrius Serrant
Darrius Serrant
  Mühendislik takımıyla şimdi sohbet edin
Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimleri lisans derecesine sahiptir ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışmaktadır. Küçük yaşlardan itibaren kodlamaya ilgi duyan Darrius, bilişimi hem gizemli hem de erişilebilir buldu ve onu yaratıcılık ve problem çö...

Daha Fazlasını Oku

İlgili Makaleler

30 günlük deneme → Tam ürün. Sınırlama yok. Kart gerekmez. Ücretsiz Deneme Başlat

Iron Destek Ekibi

Haftanın 5 günü, 24 saat çevrimiçiyiz.
Sohbet
E-posta
Beni Ara