Icône de message
Passer au contenu du pied de page
  1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Aide Node
  4. toastify npm
AIDE NODE

toastify npm (Comment ça marche pour les développeurs)

Darrius Serrant
Darrius Serrant
Mis à jour:

Dans le développement web moderne, fournir des retours oppoutuns aux utilisateurs est crucial pour une expérience utilisateur fluide. Les notifications toast sont un moyen efficace de délivrer des messages sans perturber le flux de travail de l'utilisateur. Le package React-toastify est un choix populaire pour implémenter des notifications toast dans les applications React en raison de sa simplicité et de sa flexibilité. Nous examinerons également le package NPM IronPDF pour générer, éditer et gérer des documents PDF. Cet article vous guidera à travers le processus d'intégration de React-toastify et de IronPDF dans votre projet React.

Qu'est-ce que Toastify ?

React-toastify est un package NPM qui vous permet d'ajouter des notifications toast personnalisables à vos applications React avec une configuration minimale. Il offre une variété de fonctionnalités, y compris différents types de notifications, une fonction de fermeture automatique, un style personnalisé, et plus encoue.

toastify npm (Fonctionnement pour les développeurs) : Figure 1 - Notifications Toast avec différents styles et personnalisations grâce au package React-Toastify.

Installation

Pour commencer avec react-toastify, vous devez installer le package via NPM ou Yarn. Exécutez la commande suivante dans le répertoire racine de votre projet :

npm install react-toastify
npm install react-toastify
SHELL

ou

yarn add react-toastify
yarn add react-toastify
SHELL

Utilisation de base

Après avoir installé le package, vous pouvez commencer à utiliser react-toastify dans votre application React. Voici un exemple de code simple pour démontrer comment intégrer et utiliser react-toastify.

1. Importer les composants Toastify

Tout d'abord, vous devez importer les composants nécessaires de 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. Configurer Toastify

Ensuite, ajoutez le composant ToastContainer à votre application.

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

3. Déclencher des notifications Toast

Vous pouvez déclencher une notification toast en utilisant la fonction toast. Voici un exemple de code pour afficher un message de réussite :

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

Fonctionnalités avancées

Hooks OnOpen et OnClose

React-toastify offre diverses fonctionnalités avancées qui vous permettent de personnaliser le comportement et l'apparence de vos toasts en utilisant les hooks onOpen et 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

Dans cet exemple :

  • Lorsque le toast s'ouvre, le hook onOpen se déclenche, et nous affichons une alerte.
  • Lorsque le toast se ferme, le hook onClose se déclenche, et une autre alerte est montrée.

Positions personnalisées

Vous pouvez afficher des toasts à différentes positions sur l'écran en utilisant l'option de position :

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

Durée de fermeture automatique

Vous pouvez définir la durée d'affichage d'un toast en utilisant l'option autoClose :

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

Style personnalisé

Un style personnalisé peut être appliqué aux toasts en utilisant les options className et style :

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

Fermer les toasts

Les toasts peuvent être fermés de manière programmatique en utilisant la méthode 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

Voici un exemple complet démontrant l'utilisation de diverses fonctionnalités de 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"
    });
    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

SORTIE

toastify npm (Fonctionnement pour les développeurs) : Figure 2 - Application React-Toastify exécutée sur localhost pout 3000 et affichant des notifications toast pour les messages de succès, d'avertissement et d'erreur.

Présentation d'IronPDF

IronPDF est une bibliothèque PDF C# puissante qui permet aux développeurs de générer et d'éditer des PDFs dans leurs projets .NET. Que vous ayez besoin de créer des PDFs à partir de HTML, de manipuler des PDFs existants ou de convertir des pages web au format PDF, IronPDF vous est utile.

toastify npm (Fonctionnement pour les développeurs) : Figure 3 - IronPDF for Node.js: La bibliothèque PDF pour Node.js

Voici quelques caractéristiques clés et cas d'utilisation :

1. Conversion de HTML en PDF

IronPDF peut convertir des pages HTML, qu'elles proviennent d'une URL, d'un fichier HTML ou d'une chaîne HTML, en PDF. Vous pouvez également convertir des fichiers HTML locaux ou des chaînes HTML en PDFs.

2. Support multiplateforme

IronPDF fonctionne parfaitement sur différentes plateformes, notamment :

  • .NET Core (8, 7, 6, 5 et 3.1+)
  • .NET Standard (2.0+)
  • .NET Framework (4.6.2+)
  • Web (Blazor & WebForms)
  • Bureau (WPF & MAUI)
  • Console (App & Bibliothèque)
  • Environnements Windows, Linux et macOS.

3. Édition et manipulation de PDFs

IronPDF vous permet de :

4. Personnalisation et formatage

Vous pouvez appliquer des modèles de pages, des en-têtes, des pieds de page, des numéros de pages et des marges personnalisées. IronPDF prend en charge l'encodage des caractères UTF-8, les URL de base, l'encodage des ressources, et plus encore.

5. Conformité aux normes

IronPDF respecte diverses normes PDF, notamment les versions PDF (1.2 - 1.7), PDF/UA (PDF/UA-1), et PDF/A (PDF/A-3b).

Générer un document PDF avec IronPDF et le package NPM Toastify

Installation des dépendances : Commencez par créer un nouveau projet Next.js (si vous ne l'avez pas déjà fait) à l'aide de la commande suivante. Veuillez vous référer à la page de configuration.

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

Ensuite, naviguez vers votre répertoire de projet :

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

Installez les paquets requis :

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

Créer un PDF : Créons maintenant un exemple simple de génération d'un PDF à l'aide IronPDF . Dans votre composant Next.js (par exemple, pages/index.tsx), ajoutez le code suivant :

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

Étant donné que IronPDF fonctionne uniquement sur Node.js, ajoutez ensuite une API pour l'application où le PDF est généré en utilisant Node.js.

Créez un fichier pdf.js dans le dossier pages/api et ajoutez le code ci-dessous :

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

Remarque : Dans le code ci-dessus, ajoutez votre propre clé de licence.

Exécutez votre application : Démarrez votre application Next.js :

npm run dev
npm run dev
SHELL

ou

yarn dev
yarn dev
SHELL

SORTIE

Ouvrez votre navigateur et naviguez vers http://localhost:3000 pour voir le site ci-dessous :

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.

Cliquez maintenant sur le bouton "Montrer les toasts" pour voir les messages toast.

toastify npm (Comment ça marche pour les développeurs) : Figure 5 - Après avoir cliqué sur le bouton Montrer les toasts, l'application affiche des notifications toast pour les messages de succès, d'avertissement et d'erreur. Vous pouvez également utiliser le champ de texte pour entrer l'URL de la page web que vous souhaitez convertir en document PDF et cliquer sur le bouton Générer un PDF. Cela convertira la page web spécifiée en PDF avec IronPDF.

Entrez maintenant une URL de site web pour générer un PDF et cliquez sur "Générer un PDF". Un fichier nommé awesomeIron.pdf sera téléchargé.

toastify npm (Fonctionnement pour les développeurs) : Figure 6 - PDF généré en convertissant l'URL spécifiée en PDF à l'aide IronPDF

Licence IronPDF

Pour des informations sur la licence IronPDF, veuillez vous référer à la page Licences IronPDF.

Placez la clé de licence dans l'application comme illustré ci-dessous :

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

Conclusion

React-toastify est une bibliothèque puissante et facile à utiliser pour ajouter des notifications toast à vos applications React. Avec sa large gamme de fonctionnalités et d'options de personnalisation, vous pouvez améliorer l'expérience utilisateur en fournissant des retours en temps réel de manière très simple et non intrusive. D'autre part, IronPDF est de loin la bibliothèque d'entreprise la plus polyvalente avec un support pour générer, éditer et gérer des documents PDF. En suivant les étapes décrites dans cet article, vous pouvez rapidement intégrer React-toastify et IronPDF dans votre projet et commencer à tirer parti de leurs capacités.

Pour plus d'informations sur le démarrage avec IronPDF, veuillez vous référer à leur page de documentation et à leurs exemples de code.

Darrius Serrant
Darrius Serrant
  Discutez maintenant avec l'équipe d'ingénierie
Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Essai gratuit

Équipe de soutien Iron

Nous sommes en ligne 24 heures sur 24, 5 jours sur 7.
Chat
Email
Appelez-moi