IRONSOFTWAREHOME
IRONSUITEすべて10で2の価格です。
イメージングと認識
ユーティリティ
エンタープライズ用IRON
営業に問い合わせ
企業別
ノードヘルプ

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

Curtis Chau
Curtis Chau
Updated: 2026年6月20日

現代のウェブ開発において、ユーザーにタイムリーなフィードバックを提供することはシームレスなユーザー体験にとって重要です。 トースト通知は、ユーザーのワークフローを妨げることなくメッセージを届ける効果的な方法です。 その簡便さと柔軟性から、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
SHELL

or

yarn add react-toastify
SHELL

基本的な使用法

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

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

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

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
JavaScript

2. Toastifyを設定する

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

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

高度な機能

OnOpenとOnCloseフック

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

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import '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>
  );
}

export default App;
JavaScript

この例では：

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

カスタムポジション

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

toast.info("Information message", {
  position: "top-right"
});
JavaScript

自動閉じの時間

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

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

カスタムスタイリング

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

toast.error("Error message", {
  className: 'custom-toast',
  style: { background: 'red', color: 'white' }
});
JavaScript

トーストを解雇する

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

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

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

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position: "top-right"
    });
    toast.info("Information message", {
      position: "bottom-left"
    });
    toast.warn("Warning message", {
      autoClose: 5000
    });
    toast.error("Error message", {
      className: 'custom-toast',
      style: { background: 'red', color: 'white' }
    });
  };

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

export default App;
JavaScript

出力

toastify npm (開発者向けの使い方): 図2 - localhostポート:3000で実行中のReact-Toastifyアプリケーションと、成功、警告、エラーメッセージのトースト通知。

IronPDFの紹介

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

toastify npm (開発者向けの使い方): 図3 - IronPDF for Node.js: Node.jsのPDFライブラリ

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

1. HTMLからPDFへの変換

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

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

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

  • .NET Core (8, 7, 6, 5, and 3.1+)
  • .NET Standard (2.0+)
  • .NET Framework (4.6.2+)
  • Web (Blazor & WebForms)
  • デスクトップ (WPF & MAUI)
  • コンソール (App & Library)
  • Windows、Linux、およびmacOS環境。

3. PDFの編集および操作

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

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

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

cd my-pdf-app
SHELL

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

> npm install @ironsoftware/ironpdf, react-toastify

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

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

export 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("Information message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.error("Error message", {
            className: 'custom-toast',
            style: { background: 'red', color: '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 (error) {
            console.error('Error generating PDF:', error);
        }
    };

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

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

下記のコードを追加するために、pages/apiフォルダ内に作成します。

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

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

export 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 (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}
JavaScript

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

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

npm run dev
SHELL

or

yarn dev
SHELL

出力

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

toastify npm (How It Works For Developers): Figure 4 - React-Toastify application running on localhost port:3000 and displaying a button "Show Toasts", along with a text-field for "Enter URL To Convert to PDF" and a "Generate PDF" button.

"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ライセンスに関する情報については、IronPDFライセンスページをご参照ください。

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

import { 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の使い始めに関する詳細情報については、彼らのドキュメンテーションページやコードサンプルをご参照ください。

Curtis Chau
Curtis Chau
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

...
詳しく読む

関連する記事

Key in blue circle

無料の30日間トライアルキーをすぐに入手してください。

Your trial license will be sent to your email address

制限なし。100% ロック解除済み。クレジットカード不要。

OR
bullet_checkedクレジットカードやアカウントの作成は不要です。制限なし。100% ロック解除済み。クレジットカード不要。
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried Iron Suite
無料のライブデモを予約する
Booking Badge

世界中の数百万人のエンジニアから信頼されています。

ライセンスはより安く
義務のない相談を受ける
下記のフォームを記入するか、sales@ironsoftware.comにメールしてください。
あなたの詳細は常に守秘されます。
世界中の数百万人のエンジニアから信頼されています。
ライセンスはより安く
あなたの無料30日間の試用キーをすぐに入手。
クレジットカードやアカウントの作成は不要です。
PDF用C# NuGetライブラリ
NuGetでインストール

バージョン: 2026.9

PM > Install-Package IronPdf
nuget.org/packages/IronPdf/
  1. ソリューションエクスプローラーで参照を右クリックし、NuGetパッケージを管理を選択
  2. ブラウズを選択し、"IronPDF"を検索
  3. パッケージを選択してインストール
C# PDF DLL
DLLをダウンロード

バージョン: 2026.9

またはここからWindowsインストーラーをダウンロードする。

  1. IronPDFを~/Libsなどの場所に解凍し、ソリューションディレクトリ内に配置する
  2. Visual Studioソリューションエクスプローラーで参照を右クリックし、"IronPDF.dll"をブラウズして選択

ライセンスは$999から