メッセージアイコン
  1. Node.js 用 IronPDF
  2. IronPDF for Node.js ブログ
  3. ノードヘルプ
  4. react フックフォーム NPM
ノードヘルプ

react hook form NPM (開発者のための仕組み)

公開済み 2024年10月24日
共有:

イントロダクション

React Hook Form は、React アプリケーションでフォームの値を管理するための強力で効率的なライブラリです。 Reactのフックを活用し、コントローラコンポーネントなしでシームレスでパフォーマンスの高いエクスペリエンスを提供します。 この記事では、カスタムエラーメッセージ付き React Hook Form の基本的な使い方と、その利点について説明します。

React Hook Formを使用する理由

  1. パフォーマンス：React Hook Formは、制御されていないコンポーネントとネイティブのHTML入力を使用するため、再レンダリングの回数が減り、パフォーマンスが向上します。

  2. シンプルさ：APIは直感的で使いやすく、他のフォームライブラリよりもコード行数が少なくて済みます。

  3. 柔軟性：複雑なReact Hookフォーム検証、制約ベースの検証APIをサポートし、UIライブラリとうまく統合します。

インストール

React Hook Formをインストールするには、以下のコマンドを実行してください：

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

基本的な使用法

React Hook Formを使って、制御コンポーネントと子コンポーネントを持たないシンプルな登録フォームを作ってみましょう。

  1. useForm Hookをインポートしてください：
import { useForm } from "react-hook-form";
JAVASCRIPT
  1. **フックを初期化します：
const { register, handleSubmit, formState: { errors } } = useForm();
JAVASCRIPT
  1. **入力値と検証失敗のためのエラーオブジェクトを持つフォームを作成します：
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

出力

反応フックフォーム NPM (開発者向けの仕組み)：図1 - 登録フォームの出力

高度な使用法

React Hook Form は、サードパーティの UI ライブラリとの統合やカスタムバリデーションなど、より高度なユースケースをサポートしています。

  1. 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>
  );
}
JAVASCRIPT

出力

反応フックフォーム NPM (開発者向けの仕組み)：図2 - マテリアルUIフォーム出力

  1. カスタム検証：
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

出力

反応フックフォーム NPM (開発者向けの仕組み)：図3 - カスタムバリデーションフォームの出力

IronPDFの紹介

反応フックフォーム NPM (開発者向けの仕組み)：図4 - IronPDF

Node.js 用 IronPDFは、PDFを生成、編集、変換するための一般的なPDF文書生成ライブラリです。 IronPDFパッケージは特にNode.jsアプリケーション用に設計されています。 IronPDF NPMパッケージの主な機能と詳細は以下の通りです。

主な機能

URLからPDFへの変換

URLから直接PDFドキュメントを生成し、ウェブページのコンテンツをキャプチャして、プログラムでPDFファイルとして保存することができます。

HTMLをPDFに変換

HTMLコンテンツを簡単にPDF文書に変換。 この機能は、ウェブコンテンツからダイナミックPDFを生成する場合に特に便利です。

PDF操作

既存のPDF文書を簡単に結合、分割、操作できます。 IronPDFはページの追加、ドキュメントの分割などの機能を提供します。

PDFセキュリティ

PDF文書をパスワードで暗号化したり、電子署名を適用したりして保護します。 IronPDFは不正アクセスから機密文書を保護するオプションを提供します。

高品質出力

テキスト、画像、書式を正確にレンダリングして、高品質のPDF文書を作成します。 IronPDFは生成されたPDFが元のコンテンツに忠実であることを保証します。

クロスプラットフォーム互換性

IronPDFはWindows、Linux、macOSを含む様々なプラットフォームと互換性があり、幅広い開発環境に適しています。

シンプルな統合

Node.jsアプリケーションにIronPDFをnpmパッケージを使って簡単に統合できます。 APIは十分に文書化されているので、PDF生成機能をプロジェクトに組み込むのは簡単です。

インストール

IronPDF NPMパッケージをインストールするには、以下のコマンドを使用します：

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

IronPDFを使ってPDFドキュメントを生成し、Prettier NPMパッケージを使う

**依存関係のインストールまず、新しいNext.jsプロジェクトを作成します。(まだなら)以下のコマンドを使用します。 参照してくださいNext.jsセットアップページ

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

次に、プロジェクト・ディレクトリに移動する：

cd reacthookform-pdf

必要なパッケージをインストールする：

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

PDFを作成する

では、IronPDFを使ってPDFを生成する簡単な例を作ってみましょう。

PDF Generation API：最初のステップは、PDFドキュメントを生成するためのバックエンドAPIを作成することです。 IronPDFはサーバーサイドでしか動作しないので、ユーザーがPDFを生成したいときに呼び出すAPIを作成する必要があります。 pages/api/pdf.jsのパスにファイルを作成し、以下の内容を追加する。

IronPDFにはライセンスキーが必要です。ライセンスページそれを以下のコードに配置する。

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

では、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>
  );
}
JAVASCRIPT

コードの説明

  1. React Hook Formライブラリを使用して、姓、名、電子メールを入力するReactフォームビューを作成します。

  2. ユーザー入力を受け付け、IronPDFライブラリを使ってPDFを生成するAPIを作成してください。

  3. index.jsファイルでは、ユーザーがsubmit then generate PDFボタンをクリックすると、PDFを生成するためにバックエンドAPIを呼び出します。

出力

PDF

反応フックフォーム NPM (開発者向けの仕組み)：図5 - PDF出力

IronPDFライセンス

IronPDFnpmパッケージは、各ユーザーのライセンスキーで動作します。 IronPDFは無料トライアル購入前にその豊富な機能をチェックすることができます。

IronPDFパッケージを使用する前にライセンスキーをここに置いてください：

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

結論

React Hook Form は、React でフォームを処理するための汎用的で効率的なライブラリです。 シンプルさ、パフォーマンス、柔軟性により、シンプルなフォームにも複雑なフォームにも最適です。 小規模なプロジェクトでも大規模なアプリケーションでも、React Hook Form はフォームを簡単に管理するのに役立ちます。 IronPDF.NET開発者がプログラムでPDFドキュメントを扱うための堅牢なソリューションとして際立っています。 様々なフォーマットからのPDF作成、マージや編集などの操作機能、セキュリティオプション、フォーム作成、フォーマット変換など、IronPDFは.NETアプリケーションへのPDF機能の統合を効率化します。 ユーザーフレンドリーなAPIと多機能性により、開発プロジェクト内のPDFタスクを効率的に管理する貴重なツールとなっています。

< 以前
rxjs NPM (開発者のための仕組み)
次へ >
faye NPM (開発者のための仕組み)

npmでインストール

バージョン:2024.12

> npm i @ironsoftware/ironpdf

問題を報告

準備はできましたか？ バージョン: 2024.12 新発売

無料のnpmインストール
無料で始める
npm ダウンロード 無料トライアルを開始
ライセンスを表示 >
Experience the full power of IronPDF 無料トライアルを開始