ノードヘルプ

toastify npm（開発者向けの仕組み）

公開済み 2024年9月29日

共有:

イントロダクション

現代のウェブ開発において、ユーザーに迅速なフィードバックを提供することは、シームレスなユーザーエクスペリエンスにとって重要です。トースト通知は、ユーザーの作業の流れを妨げることなくメッセージを届ける効果的な方法です。についてReact-toastifyパッケージは、そのシンプルさと柔軟性から、React アプリケーションでトースト通知を実装するための人気のある選択肢です。また検討しますIronPDFPDFドキュメントを生成、編集、管理するNPMパッケージ。この記事では、統合プロセスを案内します。React-toastify以下のコンテンツを日本語に翻訳してください：IronPDFあなたのReactプロジェクトに組み込む。

Toastifyとは何ですか？

React-toastifyは、最小限のセットアップでReactアプリケーションにカスタマイズ可能なトースト通知を追加できるNPMパッケージです。さまざまな特徴を提供しており、異なる通知タイプ、自動クローズ機能、カスタムスタイル、残り時間の表示などがあります。

toastify npm（開発者向けの仕組み）：図1 - React-Toastifyパッケージを使用したさまざまなスタイルとカスタマイズのトースト通知。

インストール

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

npm install react-toastify

または

yarn add react-toastify

基本的な使用法

パッケージをインストールした後、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';

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

JAVASCRIPT

2. Toastify を設定する

次に、ToastContainerコンポーネントをアプリケーションに追加してください。

function App() {
  return (
    <div>  // react component rendered inside
      <ToastContainer />
    </div>
  );
}

function App() {
  return (
    <div>  // react component rendered inside
      <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 /> // react component inside
    </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 /> // react component inside
    </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;

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

toast.info("Information 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.error("Error message", {
  className: 'custom-toast',
  style: { background: 'red', color: 'white' }
});

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

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"  // success notification
    });
    toast.info("Information message", {
      position:"bottom-left"  // info will be displayed with progress bar
    });
    toast.warn("Warning message", {
      autoClose: 5000 // close or pause toast messages
    });
    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;

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"  // success notification
    });
    toast.info("Information message", {
      position:"bottom-left"  // info will be displayed with progress bar
    });
    toast.warn("Warning message", {
      autoClose: 5000 // close or pause toast messages
    });
    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 - React-Toastifyアプリケーションがlocalhostポート3000で実行されており、成功、警告、エラーメッセージのトースト通知を表示します。

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コア(8, 7, 6, 5, および3.1+)
.NETスタンダード(2.0以上)
.NETフレームワーク(4.6.2+)
ウェブ(Blazor & WebForms (ブレイザー & ウェブフォーム))
デスクトップ(WPF & MAUI)
コンソール(アプリ＆ライブラリー)
Windows、Linux、macOS環境。

3. PDFの編集と操作

IronPDFを使用すると、次のことができます:

セットプロパティとセキュリティ (パスワード、権限).
追加デジタル署名.
PDFファイルを圧縮します。
メタデータとリビジョン履歴を編集する。
追加、コピー、および削除ページ。

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

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

5. 標準の準拠

IronPDFは、PDFバージョンを含むさまざまなPDF標準に準拠しています。(1.2 - 1.7), PDF/UA(PDF/UA-1)、PDF/A(PDF/A-3b).

IronPDFとToastify NPMパッケージを使用してPDFドキュメントを生成する

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

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

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

cd my-pdf-app

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

npm install @ironsoftware/ironpdf
npm install react-toastify

PDFを作成：では、PDFを生成する簡単な例を作ってみましょうIronPDF. Next.jsコンポーネントで(例: ページ/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('');
    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'}
        });
    };
    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);
        }
    };
    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>{" "}
                </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>
    );
}

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('');
    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'}
        });
    };
    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);
        }
    };
    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>{" "}
                </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フォルダーにpdf.jsファイルを作成し、以下のコードを追加します。

// 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.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();
    }
}

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

注: 上記のコードにあなた自身のライセンスキーを追加してください。

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

npm run dev
or
yarn dev

出力

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

toastify npm（開発者向けの動作原理）：図4 - React-Toastifyアプリケーションがlocalhostポート:3000で実行され、「Show Toasts」ボタンと「Enter URL To Convert to PDF」というテキストフィールド、そして「Generate PDF」ボタンを表示しています。

「Show Toasts」ボタンをクリックして、トーストメッセージを表示します。

toastify npm(開発者向けの仕組み): 図5 - Show Toastsボタンをクリックすると、アプリケーションはSuccess、Warning、Errorメッセージのトースト通知を表示します。さらに、テキストフィールドを使用してPDFドキュメントに変換したいウェブページのURLを入力し、「PDFを生成」ボタンをクリックすることができます。これは、指定されたウェブページをIronPDFを使用してPDFに変換します。

ウェブサイトのURLを入力してPDFを生成し、「PDFを生成」をクリックしてください。以下のように、awesomeIron.pdfという名前のファイルがダウンロードされます。

toastify npm(開発者向けの仕組み): 図6 - IronPDFを使用して指定されたURLをPDFに変換することで生成された出力PDF

IronPDFライセンス

IronPDFページ

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

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

結論

React-toastifyは、Reactアプリケーションにトースト通知を追加するための強力で使いやすいライブラリです。その幅広い機能とカスタマイズオプションにより、リアルタイムフィードバックを非常に簡単かつ非侵入的な方法で提供することで、ユーザーエクスペリエンスを向上させることができます。一方でIronPDFは、最も多用途なエンタープライズライブラリであり、PDFドキュメントの生成、編集、管理のサポートがあります。この記事で説明されている手順に従うことで、迅速に統合できます。React-toastify以下のコンテンツを日本語に翻訳してください：IronPDFプロジェクトに取り入れて、その機能を活用し始めましょう。

IronPDFの始め方について詳しくは、こちらを参照してくださいドキュメントページとコード例.

< 以前
npmを複製する（開発者向けの動作方法）

次へ >
Socket io node.js（開発者向けの仕組み）