toastify npm（它是如何为开发人员工作的）

介绍

在现代网页开发中，为用户提供及时的反馈对于实现无缝的用户体验至关重要。 Toast 通知是一种在不干扰用户工作流程的情况下传递信息的有效方式。 React-toastify 包因其简单性和灵活性而成为在 React 应用程序中实现 toast 通知的热门选择。 我们还将研究IronPDF NPM 包来生成、编辑和管理 PDF 文档。 本文将指导您将 React-toastify 和 IronPDF 集成到您的 React 项目中。

Toastify是什么？

React-toastify 是一个NPM包，可让您通过最少的设置将自定义的toast通知添加到您的React应用程序中。它提供了各种功能，包括不同的通知类型、自动关闭功能、自定义样式、剩余时间可能性等。

安装

要开始使用react-toastify，您需要通过NPM或Yarn安装该软件包。 在项目的根目录中运行以下命令：

npm install react-toastify

npm install react-toastify

或

yarn add 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';

js

2. 配置 Toastify

接下来，将 ToastContainer 组件添加到您的应用程序中。

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

js

3. 触发Toast通知

您可以使用toast函数触发一个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>
  );
}

js

高级功能

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;

js

在此示例中：

• 当提示打开时，onOpen 钩子触发，我们显示一个警报。
• 当提示关闭时，onClose 钩子触发，并显示另一个警报。

自定义位置

您可以使用位置选项在屏幕的不同位置显示提示信息：

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

js

自动关闭时长

您可以使用autoClose选项设置吐司显示的持续时间：

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

js

自定义样式

可以使用className和样式选项自定义样式应用于吐司。

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

js

关闭提示框

可以使用 toast.dismiss 方法以编程方式关闭 Toast：

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

js

以下是一个完整的示例，展示了如何使用各种 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;

js

输出

介绍IronPDF

IronPDF 是一个强大的 C# PDF 库，允许开发人员在他们的 .NET 项目中生成和编辑 PDF。 无论您是需要从HTML创建PDF、操作现有PDF，还是将网页转换为PDF格式，IronPDF 都可以满足您的需求。

以下是一些关键功能和使用案例：

HTML 转换为 PDF

IronPDF 可以将 HTML 页面从 URL、HTML 文件或 HTML 字符串转换为 PDF。 您还可以将本地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 字符编码、基址 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"

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

cd my-pdf-app

安装所需的软件包：

npm install @ironsoftware/ironpdf
npm install react-toastify

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

js

由于IronPDF仅在Node.js上运行，接下来为应用程序添加一个API，其中PDF是使用Node.js生成的。

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

js

注意：在上述代码中添加您自己的许可证密钥

运行您的应用：启动您的 Next.js 应用：

npm run dev
or
yarn dev

npm run dev
or
yarn dev

输出

打开浏览器，访问 http://localhost:3000 查看下面的网站。

现在点击“显示吐司消息”按钮以查看吐司消息。

![toastify npm（它如何为开发者工作）：图 5 - 单击“显示吐司”按钮后，应用程序显示成功、警告和错误消息的吐司通知。 此外，您可以使用文本字段输入要转换为PDF文档的网页的URL，然后点击“生成PDF”按钮。 这将使用IronPDF将指定的网页转换为PDF。

现在输入网站 URL 以生成 PDF，然后点击生成 PDF。 将会下载名为 awesomeIron.pdf 的文件。

IronPDF 许可证

IronPDF 页面。

将许可证密钥放置在应用程序中，如下所示：

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

js

结论

React-toastify 是一个功能强大且易于使用的库，可用于在您的 React 应用程序中添加 toast 通知。 凭借其广泛的功能和自定义选项，您可以通过一种超简单且非侵入性的方式提供实时反馈，从而提升用户体验。 另一方面，IronPDF 是迄今为止最通用的企业库，支持生成、编辑和管理 PDF 文档。 通过遵循本文中列出的步骤，您可以快速将React-toastify和IronPDF集成到您的项目中，并开始利用其功能。

有关开始使用IronPDF的更多信息，请参阅其文档页面和代码示例。