節點幫助

toastify npm（如何為開發者工作）

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

Darrius Serrant

2024年9月29日

介紹

在現代網頁開發中，提供及時的反饋給用戶對於流暢的用戶體驗至關重要。 Toast 通知是一種有效的訊息傳遞方式，能在不打擾使用者工作流程的情況下提供訊息。 React-toastify 套件因其簡單性和靈活性而成為在 React 應用程式中實現吐司通知的熱門選擇。我們也會研究IronPDF NPM 套件，以生成、編輯和管理 PDF 文件。本文將指導您將React-toastify和IronPDF集成到您的React專案中。

什麼是 Toastify？

React-toastify 是一個 NPM 套件，允許您僅需簡單設置即可在 React 應用程式中新增可自訂的 toast 通知。它提供各種功能，包括不同的通知類型、自動關閉功能、自訂樣式、剩餘時間設置等。

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. 觸發吐司通知

您可以使用 toast 函數觸發通知提示。以下是顯示成功消息的程式碼範例：

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 鉤子觸發，並且顯示另一個警報。

自訂位置

您可以使用 position 選項在螢幕上不同位置顯示提示框：

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 是一個強大的 C# PDF 函式庫，允許開發人員在他們的 .NET 專案中生成和編輯 PDF。無論您需要從 HTML 創建 PDF、操作現有的 PDF，還是將網頁轉換為 PDF 格式，IronPDF 都能滿足您的需求。

toastify npm（對開發人員的運作方式）：圖 3 - IronPDF for Node.js：Node.js PDF 庫

以下是一些主要功能和使用案例：

HTML 轉換為 PDF

IronPDF 可以將 HTML 頁面轉換為 PDF，無論是來自 URL、HTML 文件還是 HTML 字串。您還可以將本地 HTML 文件或 HTML 字串轉換為 PDF。

2. 跨平台支持

IronPDF 可以在各種平台上無縫運行，包括：

.NET Core (8, 7, 6, 5, 和 3.1+)
.NET Standard (2.0+)
.NET Framework (4.6.2+)
網頁（Blazor 和 WebForms）
桌面程式 (WPF 和 MAUI)
控制台（應用程式和庫）
Windows、Linux 和 macOS 環境。

3. 編輯和操作PDF

IronPDF 允許您：

設定屬性和安全性（密碼、權限）。
新增數位簽名。
壓縮PDF檔案。
編輯元數據和修訂歷史。
添加、複製及刪除頁面。

4. 自訂化和格式設定

您可以套用頁面模板、頁首、頁尾、頁碼和自定義邊距。 IronPDF 支援 UTF-8 字元編碼、基礎網址、資源編碼等。

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：現在，讓我們使用 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('');
    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 上運行，接下來添加一個 API 讓應用程式使用 Node.js 生成 PDF。

在 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，顯示一個按鈕「顯示 Toasts」，以及一個「輸入 URL 以轉換為 PDF」的文本框和一個「生成 PDF」按鈕。

現在點擊「顯示提示訊息」按鈕查看提示訊息

![toastify npm（如何為開發人員工作）：圖5 - 點擊顯示吐司按鈕後，應用程式顯示成功、警告和錯誤消息的吐司通知。] 此外，您可以使用文字欄位輸入想要轉換為 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 入門的更多資訊，請參閱其文件頁面和代碼範例。

Darrius Serrant

立即與工程團隊聊天

全端軟體工程師（WebOps）

Darrius Serrant 擁有邁阿密大學的計算機科學學士學位，目前擔任 Iron Software 的全端 WebOps 行銷工程師。自幼對編程產生興趣，他認為計算機既神秘又易於接觸，使其成為創造力和解決問題的完美媒介。

在 Iron Software，Darrius 享受創造新事物並簡化複雜概念使其更易理解的過程。作為我們的其中一位常駐開發人員，他也自願教導學生，將他的專業知識傳授給下一代。

對 Darrius 來說，他的工作之所以令人滿足，是因為它受到重視並且產生了真正的影響。

< 上一頁
複製 npm（開發者如何運作）

下一個 >
Socket.io node.js（如何為開發者運作）