ノードヘルプ

toastify npm (開発者向けのしくみ)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

更新日:6月 22, 2025

現代のウェブ開発において、ユーザーにタイムリーなフィードバックを提供することはシームレスなユーザー体験にとって重要です。トースト通知は、ユーザーのワークフローを妨げることなくメッセージを届ける効果的な方法です。その簡便さと柔軟性から、React アプリケーションでトースト通知を実装するための人気の選択肢がReact-toastifyパッケージです。また、PDF文書を生成、編集、管理するためにIronPDF NPMパッケージを見ていきます。この記事では、React-toastifyとIronPDFをReactプロジェクトに統合するプロセスをご案内します。

Toastifyとは？

React-toastifyは、カスタマイズ可能なトースト通知を最低限の設定でReactアプリケーションに追加できるNPMパッケージです。さまざまな通知タイプ、自動閉じ機能、カスタムスタイリングなど、多彩な機能を提供しています。

toastify NPM（開発者にとっての動作方法）：図1 - React-Toastifyパッケージを使用した異なるスタイルとカスタマイズのトースト通知。

インストール

react-toastifyを使い始めるには、NPMやYarnを介してパッケージをインストールする必要があります。プロジェクトのルートディレクトリで次のコマンドを実行してください：

npm install react-toastify

npm install react-toastify

SHELL

または

yarn add react-toastify

yarn add react-toastify

SHELL

基本的な使用法

パッケージをインストールした後、あなたのReactアプリケーションでreact-toastifyを使い始めることができます。以下は、react-toastifyを統合して使用する方法を示す簡単なコード例です。

1. Toastifyコンポーネントをインポートする

まず、react-toastifyから必要なコンポーネントをインポートする必要があります：

impまたはt React from 'react';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';

impまたはt React from 'react';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';

JAVASCRIPT

2. Toastifyを設定する

次に、ToastContainerコンポーネントをアプリケーションに追加します。

function App() {
  return (
    <div>
      <ToastContainer />
    </div>
  );
}

function App() {
  return (
    <div>
      <ToastContainer />
    </div>
  );
}

JAVASCRIPT

3. トースト通知をトリガーする

トースト関数を使用してトースト通知をトリガーすることができます。ここに成功メッセージを表示するコードサンプルがあります：

function notify() {
  toast.success("Success! This is a success message.", {
    position: toast.POSITION.TOP_RIGHT
  });
}

function App() {
  return (
    <div>
      <button onClick={notify}>Show Toast</button>
      <ToastContainer />
    </div>
  );
}

function notify() {
  toast.success("Success! This is a success message.", {
    position: toast.POSITION.TOP_RIGHT
  });
}

function App() {
  return (
    <div>
      <button onClick={notify}>Show Toast</button>
      <ToastContainer />
    </div>
  );
}

JAVASCRIPT

高度な機能

OnOpenとOnCloseフック

React-toastifyは、onOpenとonCloseフックを使用してトーストの動作や外観をカスタマイズするためのさまざまな高度な機能を提供します。

impまたはt React from 'react';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast("Hello there", {
      onOpen: () => window.alert('Called when I open'),
      onClose: () => window.alert('Called when I close')
    });
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer />
    </div>
  );
}

expまたはt default App;

impまたはt React from 'react';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast("Hello there", {
      onOpen: () => window.alert('Called when I open'),
      onClose: () => window.alert('Called when I close')
    });
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer />
    </div>
  );
}

expまたはt default App;

JAVASCRIPT

この例では：

トーストが開くとき、onOpenフックがトリガーされ、アラートが表示されます。
トーストが閉じるとき、onCloseフックがトリガーされ、別のアラートが表示されます。

カスタムポジション

位置オプションを使用して画面上の異なる位置にトーストを表示することができます：

toast.info("Infまたはmation message", {
  position: "top-right"
});

toast.info("Infまたはmation message", {
  position: "top-right"
});

JAVASCRIPT

自動閉じの時間

autoCloseオプションを使用してトーストが表示される時間を設定できます：

toast.warn("Warning message", {
  autoClose: 5000 // Auto close after 5 seconds
});

toast.warn("Warning message", {
  autoClose: 5000 // Auto close after 5 seconds
});

JAVASCRIPT

カスタムスタイリング

classNameおよびスタイルオプションを使用してトーストにカスタムスタイリングを適用することができます：

toast.errまたは("Errまたは message", {
  className: 'custom-toast',
  style: { background: 'red', colまたは: 'white' }
});

toast.errまたは("Errまたは message", {
  className: 'custom-toast',
  style: { background: 'red', colまたは: 'white' }
});

JAVASCRIPT

トーストを解雇する

トーストはtoast.dismissメソッドを使用してプログラムで解雇することができます：

const toastId = toast("This toast can be dismissed");
function dismissToast() {
  toast.dismiss(toastId);
}

const toastId = toast("This toast can be dismissed");
function dismissToast() {
  toast.dismiss(toastId);
}

JAVASCRIPT

さまざまなreact-toastify機能の使用を示す完全な例はこちらです：

impまたはt React from 'react';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position: "top-right"
    });
    toast.info("Infまたはmation message", {
      position: "bottom-left"
    });
    toast.warn("Warning message", {
      autoClose: 5000
    });
    toast.errまたは("Errまたは message", {
      className: 'custom-toast',
      style: { background: 'red', colまたは: 'white' }
    });
  };

  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}

expまたはt default App;

impまたはt React from 'react';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position: "top-right"
    });
    toast.info("Infまたはmation message", {
      position: "bottom-left"
    });
    toast.warn("Warning message", {
      autoClose: 5000
    });
    toast.errまたは("Errまたは message", {
      className: 'custom-toast',
      style: { background: 'red', colまたは: 'white' }
    });
  };

  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}

expまたはt default App;

JAVASCRIPT

出力

toastify NPM（開発者にとっての動作方法）：図2 - ローカルホストポート:3000で実行中のReact-Toastifyアプリケーションと成功、警告、エラーメッセージのトースト通知を表示。

IronPDFの紹介

IronPDFは、開発者が.NETプロジェクトでPDFを生成および編集できる強力なC# PDFライブラリです。 HTMLからPDFを作成する必要がある場合、既存のPDFを操作する場合、またはウェブページをPDF形式に変換する場合は、IronPDFが役立ちます。

toastify NPM（開発者にとっての動作方法）：図3 - IronPDF fまたは Node.js：Node.js PDFライブラリ

ここでは、主な機能と使用例をいくつか紹介します：

1. HTMLからPDFへの変換

IronPDFは、URL、HTMLファイル、HTML文字列からHTMLページをPDFに変換できます。ローカルのHTMLファイルやHTML文字列をPDFに変換することもできます。

2. クロスプラットフォームのサポート

IronPDFはさまざまなプラットフォームでシームレスに動作します。これには以下が含まれます：

.NET Cまたはe (8, 7, 6, 5, and 3.1+)
.NET Standard (2.0+)
.NET Framewまたはk (4.6.2+)
Web (Blazまたは & WebFまたはms)
デスクトップ (WPF & MAUI)
コンソール (App & Library)
Windows、Linux、およびmacOS環境。

3. PDFの編集および操作

IronPDFを使用して以下を実行できます：

プロパティおよびセキュリティ（パスワード、権限）の設定。
デジタル署名の追加。
PDFファイルの圧縮。
メタデータと履歴の編集。
ページの追加、コピー、および削除。

4. カスタマイズとフォーマット

ページテンプレート、ヘッダー、フッター、ページ番号、およびカスタムマージンを適用できます。 IronPDFはUTF-8文字エンコーディング、ベースURL、アセットエンコーディングなどをサポートしています。

5. スタンダード準拠

IronPDFは、PDFバージョン（1.2 - 1.7）、PDF/UA（PDF/UA-1）、およびPDF/A（PDF/A-3b）など、さまざまなPDF標準に準拠しています。

IronPDFとToastify NPMパッケージを使用してPDF文書を生成する

依存関係をインストール: まず、次のコマンドを使用して新しいNext.jsプロジェクトを作成します（まだ作成していない場合）。セットアップページを参照してください: setup

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

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

SHELL

次に、プロジェクトディレクトリに移動します。

cd my-pdf-app

cd my-pdf-app

SHELL

必要なパッケージをインストールします。

npm install @ironsoftware/ironpdf
npm install react-toastify

npm install @ironsoftware/ironpdf
npm install react-toastify

SHELL

PDFを作成: では、IronPDFを使用してPDFを生成する簡単な例を作成してみましょう。次のコードをNext.jsコンポーネント（例：pages/index.tsx）に追加してください：

impまたはt Head from 'next/head';
impまたはt styles from '../styles/Home.module.css';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';
impまたはt { useState } from "react";

expまたはt default function Home() {
    const [textInput, setTextInput] = useState('');

    // Function to show toast notifications
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Infまたはmation message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.errまたは("Errまたは message", {
            className: 'custom-toast',
            style: { background: 'red', colまたは: 'white' }
        });
    };

    // Function to generate a PDF
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url=' + textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'example.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (errまたは) {
            console.errまたは('Errまたは generating PDF:', errまたは);
        }
    };

    // Handler fまたは input change
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div className={styles.container}>
            <Head>
                <title>Demo Toaster and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Toaster and Generate PDF From IronPDF</h1>
                <button style={{margin: 20, padding: 5}} onClick={notify}>Show Toasts</button>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                    <input type="text" value={textInput} onChange={handleChange} />
                </p>
                <button style={{margin: 20, padding: 5}} onClick={generatePdf}>Generate PDF</button>
                <ToastContainer />
            </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;
                    bまたはder-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-decまたはation: none;
                    colまたは: inherit;
                }
                code {
                    background: #fafafa;
                    bまたはder-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: bまたはder-box;
                }
            `}</style>
        </div>
    );
}

impまたはt Head from 'next/head';
impまたはt styles from '../styles/Home.module.css';
impまたはt { ToastContainer, toast } from 'react-toastify';
impまたはt 'react-toastify/dist/ReactToastify.css';
impまたはt { useState } from "react";

expまたはt default function Home() {
    const [textInput, setTextInput] = useState('');

    // Function to show toast notifications
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Infまたはmation message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.errまたは("Errまたは message", {
            className: 'custom-toast',
            style: { background: 'red', colまたは: 'white' }
        });
    };

    // Function to generate a PDF
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url=' + textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'example.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (errまたは) {
            console.errまたは('Errまたは generating PDF:', errまたは);
        }
    };

    // Handler fまたは input change
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }

    return (
        <div className={styles.container}>
            <Head>
                <title>Demo Toaster and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Toaster and Generate PDF From IronPDF</h1>
                <button style={{margin: 20, padding: 5}} onClick={notify}>Show Toasts</button>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                    <input type="text" value={textInput} onChange={handleChange} />
                </p>
                <button style={{margin: 20, padding: 5}} onClick={generatePdf}>Generate PDF</button>
                <ToastContainer />
            </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;
                    bまたはder-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-decまたはation: none;
                    colまたは: inherit;
                }
                code {
                    background: #fafafa;
                    bまたはder-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: bまたはder-box;
                }
            `}</style>
        </div>
    );
}

JAVASCRIPT

IronPDFはNode.jsでのみ実行されるため、次にNode.jsを使用してPDFが生成されるアプリのAPIを追加します。

pdf.jsというファイルをpages/apiフォルダに作成し、以下のコードを追加します：

// pages/api/pdf.js
impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key Here";

expまたはt default async function handler(req, res) {
    try {
        const url = req.query.url;
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.log('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (errまたは) {
        console.errまたは('Errまたは generating PDF:', errまたは);
        res.status(500).end();
    }
}

// pages/api/pdf.js
impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key Here";

expまたはt default async function handler(req, res) {
    try {
        const url = req.query.url;
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.log('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (errまたは) {
        console.errまたは('Errまたは generating PDF:', errまたは);
        res.status(500).end();
    }
}

JAVASCRIPT

注意：上記のコードで、ご自身のライセンスキーを追加してください。

アプリを実行: Next.jsアプリを起動します：

npm run dev

npm run dev

SHELL

または

yarn dev

yarn dev

SHELL

出力

ブラウザを開いてhttp://localhost:3000に移動し、以下のウェブサイトを確認してください：

toastify NPM（開発者にとっての動作方法）：図4 - localhostポート:3000で実行中のReact-Toastifyアプリケーション、Show Toastsボタン、Enter URL To Convert to PDFというテキストフィールドおよびGenerate PDFボタンを表示。

"Show Toasts"ボタンをクリックしてトーストメッセージを確認してください。

toastify npm（開発者にとっての動作方法）：図5 - Show Toastsボタンをクリックした後、アプリケーションが成功、警告、エラーメッセージのトースト通知を表示します。さらに、PDF文書に変換したいウェブページのURLをテキストフィールドに入力してGenerate PDFボタンをクリックすることができます。これにより、指定されたウェブページがIronPDFを使用してPDFに変換されます。

リクエストに応じて、ウェブサイトのURLを入力して"Generate PDF"をクリックしてください。 awesomeIron.pdfという名前のファイルがダウンロードされます。

toastify NPM（開発者にとっての動作方法）：図6 - 指定されたURLをPDFに変換して生成された出力PDF

IronPDFライセンス

IronPDFライセンスに関する情報については、IronPDFライセンスページをご参照ください。

以下のようにアプリにライセンスキーを配置してください：

impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key Here";

impまたはt { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key Here";

JAVASCRIPT

結論

React-toastifyは非常に使いやすく、Reactアプリケーションにトースト通知を追加する強力なライブラリです。その幅広い機能とカスタマイズオプションにより、リアルタイムでユーザーフィードバックを提供し、簡単かつ侵入性の低い方法でユーザー体験を向上させることができます。その一方で、IronPDFは、PDF文書の生成、編集、管理をサポートする最も多用途のエンタープライズライブラリです。この記事の手順に従うことで、React-toastifyとIronPDFをプロジェクトに素早く統合し、その機能を活用し始めることができます。

IronPDFの使い始めに関する詳細情報については、彼らのドキュメンテーションページやコードサンプルをご参照ください。

Darrius Serrant

今すぐエンジニアリングチームとチャット

フルスタックソフトウェアエンジニア（WebOps）

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得し、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに惹かれ、コンピューティングを神秘的かつアクセス可能なものとし、創造性と問題解決のための完璧な媒体と考えていました。

Iron Softwareでは、新しいものを創造することと、複雑なコンセプトをより理解しやすくすることを楽しんでいます。Resident Developerの一人として、次世代に専門知識を共有するために、学生を教えることにも志願しました。

Darriusにとって、その仕事は価値があり、実際の影響があるため、満足感があります。