Nachrichtensymbol
Zum Fußzeileninhalt springen
  1. IronPDF for Node.js
  2. IronPDF für den Node.js Blog
  3. Node-Hilfe
  4. toastify npm
NODE-HILFE

toastify npm (Wie es für Entwickler funktioniert)

Darrius Serrant
Darrius Serrant
Aktualisiert:

In der modernen Webentwicklung ist es entscheidend, den Benutzern zeitnahes Feedback zu geben, um ein nahtloses Benutzererlebnis zu gewährleisten. Toast-Benachrichtigungen sind eine effektive Möglichkeit, Nachrichten zu übermitteln, ohne den Arbeitsablauf des Benutzers zu unterbrechen. Das React-toastify Paket ist eine beliebte Wahl zur Implementierung von Toast-Benachrichtigungen in React-Anwendungen aufgrund seiner Einfachheit und Flexibilität. Wir werden uns auch das IronPDF NPM-Paket ansehen, um PDF-Dokumente zu erstellen, zu bearbeiten und zu verwalten. Dieser Artikel führt Sie durch den Prozess der Integration von React-toastify und IronPDF in Ihr React-Projekt.

Was ist Toastify?

React-toastify ist ein NPM-Paket, das es ermöglicht, anpassbare Toast-Benachrichtigungen mit minimalem Setup in Ihre React-Anwendungen einzufügen. Es bietet eine Vielzahl von Funktionen, einschließlich verschiedener Benachrichtigungstypen, automatisches Schließen, benutzerdefinierte Gestaltung und mehr.

toastify npm (So funktioniert es für Entwickler): Abbildung 1 – Toast-Benachrichtigungen mit verschiedenen Stilen und Anpassungen mithilfe des React-Toastify-Pakets.

Installation

Um mit react-toastify zu beginnen, müssen Sie das Paket über NPM oder Yarn installieren. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus:

npm install react-toastify
npm install react-toastify
SHELL

oder

yarn add react-toastify
yarn add react-toastify
SHELL

Grundlegende Nutzung

Nach der Installation des Pakets können Sie beginnen, react-toastify in Ihrer React-Anwendung zu verwenden. Hier ist ein einfaches Codebeispiel, um zu demonstrieren, wie react-toastify integriert und verwendet wird.

1. Toastify-Komponenten importieren

Zuerst müssen Sie die notwendigen Komponenten aus react-toastify importieren:

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 konfigurieren

Fügen Sie als Nächstes die ToastContainer-Komponente zu Ihrer Anwendung hinzu.

function App() {
  return (
    <div>
      <ToastContainer />
    </div>
  );
}
function App() {
  return (
    <div>
      <ToastContainer />
    </div>
  );
}
JAVASCRIPT

3. Toast-Benachrichtigungen auslösen

Sie können eine Toast-Benachrichtigung mit der toast-Funktion auslösen. Hier ist ein Codebeispiel, wie man eine Erfolgsmeldung anzeigt:

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

Erweiterte Funktionen

OnOpen und OnClose Hooks

React-toastify bietet verschiedene erweiterte Funktionen, die es Ihnen ermöglichen, das Verhalten und das Erscheinungsbild Ihrer Toasts mit onOpen und onClose Hooks anzupassen.

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

In diesem Beispiel:

  • Wenn der Toast geöffnet wird, wird der onOpen Hook ausgelöst und wir zeigen eine Benachrichtigung an.
  • Wenn der Toast geschlossen wird, wird der onClose Hook ausgelöst und eine weitere Benachrichtigung wird angezeigt.

Benutzerdefinierte Positionen

Sie können Toasts an verschiedenen Positionen auf dem Bildschirm anzeigen, indem Sie die Positionsoption verwenden:

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

Automatische Schließdauer

Sie können die Dauer festlegen, für die ein Toast angezeigt wird, indem Sie die autoClose Option verwenden:

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

Benutzerdefinierte Gestaltung

Benutzerdefinierte Gestaltung kann auf Toasts angewendet werden, indem die className und Stiloptionen verwendet werden:

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

Toasts schließen

Toasts können programmatisch mit der Methode toast.dismiss geschlossen werden:

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

Hier ist ein vollständiges Beispiel, das die Verwendung verschiedener React-toastify-Funktionen demonstriert:

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

AUSGABE

toastify npm (So funktioniert es für Entwickler): Abbildung 2 – Die React-Toastify-Anwendung läuft auf localhost Port 3000 und zeigt Toast-Benachrichtigungen für Erfolgs-, Warn- und Fehlermeldungen an.

Einführung in IronPDF

IronPDF ist eine leistungsstarke C# PDF-Bibliothek, die es Entwicklern ermöglicht, PDFs in ihren .NET-Projekten zu erstellen und zu bearbeiten. Egal, ob Sie PDFs aus HTML erstellen, vorhandene PDFs bearbeiten oder Webseiten ins PDF-Format konvertieren müssen, IronPDF bietet Ihnen umfassende Unterstützung.

toastify npm (So funktioniert es für Entwickler): Abbildung 3 - IronPDF for Node.js: Die Node.js PDF-Bibliothek

Hier sind einige wichtige Funktionen und Anwendungsfälle:

1. HTML-zu-PDF-Konvertierung

IronPDF kann HTML-Seiten, sei es von einer URL, einer HTML-Datei oder einem HTML-String, in PDF umwandeln. Sie können auch lokale HTML-Dateien oder HTML-Strings in PDFs konvertieren.

2. Plattformübergreifende Unterstützung

IronPDF funktioniert nahtlos auf verschiedenen Plattformen, einschließlich:

  • .NET Core (8, 7, 6, 5 und 3.1+)
  • .NET Standard (2.0+)
  • .NET Framework (4.6.2+)
  • Web (Blazor & WebForms)
  • Desktop (WPF & MAUI)
  • Konsole (App & Bibliothek)
  • Windows-, Linux- und macOS-Umgebungen.

3. Bearbeiten und Manipulieren von PDFs

IronPDF ermöglicht es Ihnen:

4. Anpassung und Formatierung

Sie können Seitentemplates, Kopf- und Fußzeilen, Seitenzahlen und benutzerdefinierte Ränder anwenden. IronPDF unterstützt UTF-8-Zeichenkodierung, Basis-URLs, Asset-Kodierung und mehr.

5. Einhaltung von Standards

IronPDF hält sich an verschiedene PDF-Standards, einschließlich PDF-Versionen (1.2 - 1.7), PDF/UA (PDF/UA-1) und PDF/A (PDF/A-3b).

PDF-Dokument mit IronPDF und Toastify NPM-Paket erstellen

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie dies noch nicht getan haben) mit dem folgenden Befehl. Bitte beachten Sie die Einrichtungsseite.

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

Navigieren Sie als Nächstes in Ihr Projektverzeichnis:

cd my-pdf-app
cd my-pdf-app
SHELL

Installieren Sie die erforderlichen Pakete:

npm install @ironsoftware/ironpdf
npm install react-toastify
npm install @ironsoftware/ironpdf
npm install react-toastify
SHELL

PDF erstellen: Jetzt erstellen wir ein einfaches Beispiel für die Generierung einer PDF-Datei mit IronPDF . Fügen Sie den folgenden Code in Ihre Next.js-Komponente (z.B. pages/index.tsx) ein:

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

Da IronPDF nur auf Node.js läuft, fügen Sie als Nächstes eine API für die App hinzu, bei der PDF mit Node.js generiert wird.

Erstellen Sie eine Datei pdf.js im Ordner pages/api und fügen Sie den folgenden Code hinzu:

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

Hinweis: Fügen Sie im obigen Code Ihren eigenen Lizenzschlüssel hinzu.

App ausführen: Starten Sie Ihre Next.js-App:

npm run dev
npm run dev
SHELL

oder

yarn dev
yarn dev
SHELL

AUSGABE

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000, um die untenstehende Website zu sehen:

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.

Klicken Sie auf "Toasts anzeigen", um Toast-Nachrichten zu sehen.

toastify NPM (Wie es für Entwickler funktioniert): Abbildung 5 - Nach dem Klicken auf Toasts anzeigen erscheinen Toast-Benachrichtigungen. Darüber hinaus können Sie das Textfeld verwenden, um die URL der Webseite einzugeben, die Sie in ein PDF-Dokument konvertieren möchten, und auf die Schaltfläche "PDF erstellen" klicken. Dadurch wird die angegebene Webseite mit IronPDF in ein PDF konvertiert.

Geben Sie nun eine Website-URL ein, um ein PDF zu erstellen, und klicken Sie auf "PDF erstellen". Es wird eine Datei mit dem Namen awesomeIron.pdf heruntergeladen.

toastify npm (So funktioniert es für Entwickler): Abbildung 6 – Ausgabe-PDF, das durch Konvertierung der angegebenen URL in PDF mit IronPDF generiert wurde

IronPDF-Lizenz

Für Informationen über die IronPDF-Lizenz besuchen Sie bitte die IronPDF-Lizenzseite.

Platzieren Sie den Lizenzschlüssel in der App wie unten gezeigt:

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

Abschluss

React-toastify ist eine leistungsstarke und benutzerfreundliche Bibliothek, um Toast-Benachrichtigungen in Ihre React-Anwendungen einzufügen. Mit seinem breiten Funktionsumfang und den Anpassungsmöglichkeiten können Sie das Benutzererlebnis verbessern, indem Sie in super einfacher und unaufdringlicher Weise Echtzeit-Feedback bereitstellen. Auf der anderen Seite ist IronPDF bei weitem die vielseitigste Unternehmensbibliothek mit Unterstützung zum Erstellen, Bearbeiten und Verwalten von PDF-Dokumenten. Indem Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie React-toastify und IronPDF schnell in Ihr Projekt integrieren und ihre Fähigkeiten nutzen.

Für weitere Informationen zum Einstieg in IronPDF konsultieren Sie bitte die Dokumentation-Seite und die Codebeispiele.

Darrius Serrant
Darrius Serrant
  Jetzt mit dem Ingenieurteam chatten
Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...

Weiterlesen

Verwandte Artikel

30-Tage-Testversion → Volles Produkt. Keine Grenzen. Keine Karte. Gratis testen

Iron Support Team

Wir sind 24 Stunden am Tag, 5 Tage die Woche online.
Chat
E-Mail
Rufen Sie mich an