AIDE SUR LES NœUDS

toastify npm (Comment cela fonctionne pour les développeurs)

Publié septembre 29, 2024

Introduction

Dans le développement web moderne, fournir un retour d'information en temps opportun aux utilisateurs est essentiel 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. LesReact-toastifyLe package 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 égalementIronPDFPackage NPM pour générer, modifier et gérer des documents PDF. Cet article vous guidera à travers le processus d'intégrationReact-toastify etIronPDFdans votre projet React.

Qu'est-ce que Toastify ?

React-toastifyest 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é, la possibilité de temps restant et plus encore.

toastify npm(Comment cela fonctionne pour les développeurs) : Figure 1 - Notifications toast avec différents styles et personnalisations utilisant le package React-Toastify.

Installation

Pour commencerreact-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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install react-toastify

VB C#

yarn add react-toastify

yarn add react-toastify

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add react-toastify

VB C#

Utilisation de base

Après avoir installé le paquet, 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';

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

VB C#

2. Configurer Toastify

Ensuite, ajoutez le composant ToastContainer à votre application.

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

VB C#

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

VB C#

Fonctionnalités avancées

OnOpen et OnClose hooks

React-toastify offre diverses fonctionnalités avancées qui vous permettent de personnaliser le comportement et l'apparence de vos notifications 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;

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

VB C#

Dans cet exemple :

Lorsque le toast s'ouvre, le crochet 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 affichée.

Positions personnalisées

Vous pouvez afficher des notifications toast à 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"
});

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

VB C#

Durée de fermeture automatique

Vous pouvez définir la durée pendant laquelle un toast est affiché à l'aide de 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
});

toast.warn("Warning message", { autoClose:= 5000 })

VB C#

Style personnalisé

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

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

VB C#

Rejet des toasts

Les notifications toast peuvent être supprimées par programmation 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);
}

Private const toastId = toast("This toast can be dismissed")
Private Function dismissToast() As [function]
  toast.dismiss(toastId)
End Function

VB C#

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

VB C#

SORTIE

toastify npm(Comment ça fonctionne pour les développeurs) : Figure 2 - Application React-Toastify en cours d'exécution sur localhost port:3000 et affichant des notifications toast pour les messages de Succès, Avertissement et Erreur.

Présentation d'IronPDF

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

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

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

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 PDF.

2. Prise en charge multiplateforme

IronPDF fonctionne parfaitement sur différentes plateformes, y compris :

.NET Core(8, 7, 6, 5 et 3.1+)
standard .NET(2.0+)
framework .NET(4.6.2+)
Web(Blazor et WebForms)
Bureau(WPF ET MAUI)
Console(Application et bibliothèque)
Environnements Windows, Linux et macOS.

3. Édition et manipulation de PDF

IronPDF vous permet de :

Ensemblepropriétés et sécurité (mots de passe, autorisations).
Ajoutersignatures numériques.
Compresser les fichiers PDF.
Modifier les métadonnées et l'historique des révisions.
Ajouter, copier etsupprimer pages.

4. Personnalisation et Mise en Forme

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

5. Conformité aux Normes

IronPDF adhère à diverses normes PDF, y compris les versions PDF(1.2 - 1.7), PDF/UA(PDF/UA-1)et PDF/A(PDF/A-3b).

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

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js(si vous ne l'avez pas encore fait)en utilisant la commande suivante : Veuillez vous référer auconfiguration 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"

VB C#

Ensuite, accédez au répertoire de votre projet :

cd my-pdf-app

cd my-pdf-app

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd my-pdf-app

VB C#

Installez les paquets nécessaires :

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

VB C#

Créer un PDF : Maintenant, créons un exemple simple de génération d'un PDF en utilisantIronPDF. 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('');
    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>); }

VB C#

Étant donné qu'IronPDF fonctionne uniquement sur Node.js, ajoutez ensuite une API à l'application où le PDF est généré à l'aide de 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.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();
'	}
'}

VB C#

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

VB C#

SORTIE

Ouvrez votre navigateur et accédez à http://localhost:3000 pour voir le site Web ci-dessous.

toastify npm(Comment ça fonctionne pour les développeurs) : Figure 4 - Application React-Toastify exécutée sur localhost port:3000 affichant un bouton "Show Toasts", ainsi qu'un champ de texte pour "Enter URL To Convert to PDF" et un bouton "Generate PDF".

Maintenant, cliquez sur le bouton "Afficher les toasts" pour voir les messages de toast.

Entrez maintenant l'URL du site web pour générer le PDF et cliquez sur générer le PDF. Un fichier nommé awesomeIron.pdf comme ci-dessous sera téléchargé.

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

Licence d'IronPDF

IronPDF page.

Placez la clé de licence dans l'application comme indiqué 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";

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

Conclusion

React-toastifyest 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 partIronPDFest 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 intégrer rapidementReact-toastify etIronPDFintégrez-le dans votre projet et commencez à exploiter ses capacités.

Pour plus d'informations sur le démarrage avec IronPDF, veuillez vous référer à leurdocumentation etexemples de code.

< PRÉCÉDENT
répliquer npm (Comment ça fonctionne pour les développeurs)

SUIVANT >
Socket io node.js (Comment ça fonctionne pour les développeurs)