在实际环境中测试
在生产中测试无水印。
随时随地为您服务。
在现代网页开发中,为用户提供及时的反馈对于实现无缝的用户体验至关重要。 Toast 通知是一种在不干扰用户工作流程的情况下传递信息的有效方式。 "(《世界人权宣言》) React-toastify 该包是 React 应用中实现 toast 通知的热门选择,因为它简单且灵活。 我们还将调查 IronPDF 用于生成、编辑和管理PDF文档的NPM软件包。 本文将指导您完成集成过程 React-toastify 和 IronPDF 到你的React项目中。
React-toastify 是一个 NPM 包,可以让您以最小的设置为 React 应用程序添加可自定义的 toast 通知。它提供了多种功能,包括不同的通知类型、自动关闭功能、自定义样式、剩余时间显示等。
入门 react-toastify,您需要通过NPM或Yarn安装该软件包。 在项目的根目录中运行以下命令:
npm install react-toastify
npm install react-toastify
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install react-toastify
或
yarn add react-toastify
yarn add react-toastify
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add react-toastify
安装软件包后,您可以在 React 应用程序中开始使用 react-toastify。 下面是一个简单的代码示例,演示如何集成和使用 react-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';
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';
接下来,将 ToastContainer 组件添加到您的应用程序中。
function App() {
return (
<div> // react component rendered inside
<ToastContainer />
</div>
);
}
function App() {
return (
<div> // react component rendered inside
<ToastContainer />
</div>
);
}
Private Function App() As [function]
'INSTANT VB WARNING: Instant VB cannot determine whether both operands of this division are integer types - if they are then you should use the VB integer division operator:
Return ((Of div) <ToastContainer /> </div>)
End Function
您可以使用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>
);
}
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>
);
}
Private Function notify() As [function]
toast.success("Success! This is a success message.", { position:= toast.POSITION.TOP_RIGHT })
End Function
Private Function App() As [function]
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: return (<div> <button onClick={notify}> Show Toast</button> <ToastContainer /> </div>);
'INSTANT VB WARNING: Instant VB cannot determine whether both operands of this division are integer types - if they are then you should use the VB integer division operator:
Return ((Of div) <button onClick={AddressOf notify}> Show Toast</button> <ToastContainer /> </div>)
End Function
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;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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;
在此示例中:
您可以使用位置选项在屏幕的不同位置显示提示信息:
toast.info("Information message", {
position:"top-right"
});
toast.info("Information message", {
position:"top-right"
});
toast.info("Information message", { position:="top-right" })
您可以使用 autoClose 选项设置烤面包消息显示的持续时间:
toast.warn("Warning message", {
autoClose: 5000 // Auto close after 5 seconds
});
toast.warn("Warning message", {
autoClose: 5000 // Auto close after 5 seconds
});
toast.warn("Warning message", { autoClose:= 5000 })
可以使用 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' }
});
toast.error("Error message", { className: 'custom-toast', style: { background: 'red', color: 'white' } });
可以使用 toast.dismiss 方法以编程方式关闭 Toast:
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);
}
Private const toastId = toast("This toast can be dismissed")
Private Function dismissToast() As [function]
toast.dismiss(toastId)
End Function
以下是一个完整的示例,展示了如何使用各种 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;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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;
IronPDF 是一个强大的C# PDF库,允许开发人员在他们的.NET项目中生成和编辑PDF。 无论您是需要从HTML创建PDF,操作现有的PDF,还是将网页转换为PDF格式,IronPDF都能满足您的需求。
以下是一些关键功能和使用案例:
IronPDF 可以将 HTML 页面从 URL、HTML 文件或 HTML 字符串转换为 PDF。 您还可以将本地HTML文件或HTML字符串转换为PDF。
IronPDF可在各种平台上无缝运行,包括:
IronPDF 允许您:
您可以应用页面模板、页眉、页脚、页码和自定义边距。 IronPDF 支持 UTF-8 字符编码、基址 URL、资源编码等。
IronPDF 遵循各种 PDF 标准,包括 PDF 版本 (1.2 - 1.7), PDF/UA (PDF/UA-1)和 PDF/A (PDF/A-3b).
安装依赖项:首先,创建一个新的 Next.js 项目 (如果你还没有) 使用以下命令:请参考 设置 page.
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"
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd my-pdf-app
安装所需的软件包:
npm install @ironsoftware/ironpdf
npm install react-toastify
npm install @ironsoftware/ironpdf
npm install react-toastify
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @ironsoftware/ironpdf npm install react-toastify
创建 PDF:现在,让我们创建一个使用生成 PDF 的简单示例。 IronPDF. 在您的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>
);
}
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'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/System.Nullable<pdf>url='+textInput); const blob = await response.blob(); const url = window.URL.createObjectURL(New Blob([blob])); const link = document.createElement("a"c); 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>); }
由于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();
}
}
' pages/api/pdf.js
import
If True Then
IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'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();
' }
'}
注意:在上述代码中添加您自己的许可证密钥
运行您的应用:启动您的 Next.js 应用:
npm run dev
or
yarn dev
npm run dev
or
yarn dev
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm run dev @or yarn dev
打开浏览器,访问 http://localhost:3000 查看下面的网站。
现在点击“显示吐司消息”按钮以查看吐司消息。
现在输入网站 URL 以生成 PDF,然后点击生成 PDF。 将会下载名为 awesomeIron.pdf 的文件。
IronPDF page.
将许可证密钥放置在应用程序中,如下所示:
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";
IRON VB CONVERTER ERROR developers@ironsoftware.com
React-toastify 是一个强大且易于使用的库,用于为您的 React 应用程序添加吐司通知。 凭借其广泛的功能和自定义选项,您可以通过一种超简单且非侵入性的方式提供实时反馈,从而提升用户体验。 另一方面 IronPDF 是目前最为多功能的企业库,提供支持来自 IronSoftware 生成、编辑和管理PDF文档。 通过遵循本文中概述的步骤,您可以快速集成 React-toastify 和 IronPDF 到您的项目中,并开始利用其功能。