HILFE ZUM KNOTENPUNKT

toastify npm (Wie es für Entwickler funktioniert)

Einführung

In der modernen Webentwicklung ist die Bereitstellung von zeitnahem Feedback an Benutzer entscheidend für ein nahtloses Benutzererlebnis. 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 für die 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, mit dem Sie anpassbare Toast-Benachrichtigungen zu Ihren React-Anwendungen mit minimalem Aufwand hinzufügen können. Es bietet eine Vielzahl von Funktionen, darunter verschiedene Benachrichtigungstypen, Auto-Close-Funktionalität, benutzerdefinierte Stile, verbleibende Zeitmöglichkeit und mehr.

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

Einrichtung

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 Verwendung

Nach der Installation des Pakets können Sie react-toastify in Ihrer React-Anwendung verwenden. Nachfolgend ein einfaches Codebeispiel, das zeigt, wie man react-toastify integrieren und verwenden kann.

1. Toastify-Komponenten importieren

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

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

2. Toastify konfigurieren

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

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

3. Toast-Benachrichtigungen auslösen

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

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
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 mithilfe von 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;
js
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 schließt, wird der onClose-Hook ausgelöst und eine weitere Benachrichtigung angezeigt.

Benutzerdefinierte Positionen

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

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

Automatische Schließdauer

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

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

Benutzerdefinierte Gestaltung

Benutzerdefiniertes Styling kann auf Toast-Nachrichten angewendet werden, indem die Optionen className und style verwendet werden:

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

Toasts schließen

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

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

Hier ist ein vollständiges Beispiel, das die Verwendung verschiedener Funktionen von react-toastify 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"  // 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
JAVASCRIPT

OUTPUT

toastify npm (Wie es für Entwickler funktioniert): Abbildung 2 - React-Toastify-Anwendung, die auf localhost post:3000 ausgeführt wird und Toast-Benachrichtigungen für Erfolgs-, Warn- und Fehlermeldungen anzeigt.

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. Ob Sie PDFs aus HTML erstellen, vorhandene PDFs bearbeiten oder Webseiten in das PDF-Format konvertieren müssen, IronPDF bietet Ihnen die Lösung.

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

Hier sind einige wichtige Funktionen und Anwendungsfälle:

1. Konvertierung von HTML in PDF

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)
  • Schreibtisch (WPF & MAUI)
  • Konsole (Anwendung & Bibliothek)
  • Windows-, Linux- und macOS-Umgebungen.

3. Bearbeiten und Manipulieren von PDFs

IronPDF ermöglicht Ihnen:

  • Eigenschaften und Sicherheit festlegen (Passwörter, Berechtigungen).
  • Fügen Sie digitale Signaturen hinzu.
  • PDF-Dateien komprimieren.
  • Bearbeiten Sie die Metadaten und den Revisionsverlauf.
  • Seiten hinzufügen, kopieren und löschen.

4. Anpassung und Formatierung

Sie können Seitenvorlagen, Kopfzeilen, 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 erfüllt 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 erzeugen

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls noch nicht geschehen) 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 dann zu Ihrem 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

Erstellen Sie ein PDF: Lassen Sie uns nun ein einfaches Beispiel für die Erstellung eines PDFs mit IronPDF erstellen. In Ihrer Next.js-Komponente (z. B. pages/index.tsx) fügen Sie den folgenden Code hinzu:

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
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 namens pdf.js im Ordner pages/api und fügen Sie den untenstehenden 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.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
JAVASCRIPT

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

Führen Sie Ihre App aus: Starten Sie Ihre Next.js-App:

npm run dev
or
yarn dev
npm run dev
or
yarn dev
SHELL

OUTPUT

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

toastify npm (Wie es für Entwickler funktioniert): Abbildung 4 - React-Toastify-Anwendung läuft auf localhost port:3000 und zeigt einen Button Show Toasts, zusammen mit einem Textfeld für Enter URL To Convert to PDF und einem Generate PDF-Button an.

Klicken Sie jetzt auf die Schaltfläche "Show Toasts", um Toast-Nachrichten anzuzeigen.

![toastify npm (Wie es für Entwickler funktioniert): Abbildung 5 - Nach dem Klicken auf die Schaltfläche "Show Toasts" zeigt die Anwendung Toast-Benachrichtigungen für Erfolgs-, Warnungs- und Fehlermeldungen an. Außerdem können Sie das Textfeld verwenden, um die URL der Webseite einzugeben, die Sie in ein PDF-Dokument umwandeln möchten, und auf die Schaltfläche „PDF generieren“ klicken. Dies wird die angegebene Webseite mit IronPDF in eine PDF-Datei umwandeln.

Geben Sie jetzt die Website-URL ein, um das PDF zu erstellen, und klicken Sie auf PDF erstellen. Eine Datei mit dem Namen awesomeIron.pdf wird wie unten heruntergeladen.

toastify npm (Wie es für Entwickler funktioniert): Abbildung 6 - Ausgabe-PDF, das durch Umwandeln der angegebenen URL in PDF mithilfe von IronPDF erstellt wurde

IronPDF-Lizenz

IronPDF-Seite.

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";
js
JAVASCRIPT

Schlussfolgerung

React-toastify ist eine leistungsstarke und benutzerfreundliche Bibliothek zum Hinzufügen von Toast-Benachrichtigungen zu Ihren React-Anwendungen. Mit seiner breiten Palette an Funktionen und Anpassungsoptionen können Sie das Benutzererlebnis verbessern, indem Sie in einer äußerst einfachen und unaufdringlichen Weise Echtzeit-Feedback bereitstellen. Auf der anderen Seite ist IronPDF bei weitem die vielseitigste Enterprise-Bibliothek mit Unterstützung zur Erstellung, Bearbeitung und Verwaltung von PDF-Dokumenten. Wenn Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie React-toastify und IronPDF schnell in Ihr Projekt integrieren und seine Funktionen nutzen.

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

Darrius Serrant
Full Stack Software Engineer (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full Stack WebOps Marketing Engineer bei Iron Software. Schon in jungen Jahren vom Programmieren angezogen, sah er das Rechnen sowohl als mysteriös als auch zugänglich an, was es zum perfekten Medium für Kreativität und Problemlösung machte.

Bei Iron Software genießt Darrius es, neue Dinge zu erschaffen und komplexe Konzepte zu vereinfachen, um sie verständlicher zu machen. Als einer unserer ansässigen Entwickler hat er sich auch freiwillig gemeldet, um Schüler zu unterrichten und sein Fachwissen mit der nächsten Generation zu teilen.

Für Darrius ist seine Arbeit erfüllend, weil sie geschätzt wird und einen echten Einfluss hat.

< PREVIOUS
npm replizieren (Wie es für Entwickler funktioniert)
NÄCHSTES >
Socket io node.js (Wie es für Entwickler funktioniert)

Sind Sie bereit, loszulegen? Version: 2025.5 gerade veröffentlicht

Lizenzen anzeigen >