import {PdfDocument} from "@ironsoftware/ironpdf";
(async () => {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Export the PDF to a file
await pdf.saveAs("output.pdf");
// Advanced Example with HTML Assets
// Load external HTML assets: Images, CSS, and JavaScript.
const htmlContentWithAssets = "<img src='icons/iron.png'>";
const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets);
// Save the PDF with loaded assets
await advancedPdf.saveAs("html-with-assets.pdf");
})();
toastify npm (Comment cela fonctionne pour les développeurs)
Darrius Serrant
septembre 29, 2024
Partager:
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. Le paquet 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 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 fonctionnalité de fermeture automatique, un style personnalisé, la possibilité de temps restant, et plus encore.
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 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';
js
JAVASCRIPT
2. Configurer Toastify
Ensuite, ajoutez le composant ToastContainer à votre application.
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>
);
}
js
JAVASCRIPT
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 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;
js
JAVASCRIPT
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.
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);
}
js
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" // 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
SORTIE
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 PDF à partir de HTML, de manipuler des PDF existants ou de convertir des pages Web au format PDF, IronPDF est là pour vous.
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 :
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 est conforme à 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 à la page de configuration.
Créer un PDF : Maintenant, créons un exemple simple de génération d'un PDF en utilisant IronPDF. Dans votre composant Next.js (par exemple, pages/index.tsx), ajoutez le code suivant :
Ouvrez votre navigateur et accédez à http://localhost:3000 pour voir le site Web ci-dessous.
Maintenant, cliquez sur le bouton "Afficher les toasts" pour voir les messages de toast.
![toastify npm (Comment ça fonctionne pour les développeurs) : Figure 5 - Après avoir cliqué sur le bouton Afficher les toasts, l'application affiche des notifications toast pour les messages de réussite, d'avertissement et d'erreur. De plus, vous pouvez 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 PDF". Cela convertira la page Web spécifiée en PDF à l'aide d'IronPDF.
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é.
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";
js
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 à exploiter ses capacités.
Pour plus d'informations sur le démarrage avec IronPDF, veuillez vous référer à leur page de documentation et aux exemples de code.
Darrius Serrant est titulaire d'une licence en informatique de l'Université de Miami et travaille en tant qu'ingénieur marketing Full Stack WebOps chez Iron Software. Attiré par le code depuis son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le support parfait pour la créativité et la résolution de problèmes.
Chez Iron Software, Darrius apprécie de créer de nouvelles choses et de simplifier des concepts complexes pour les rendre plus compréhensibles. En tant que l'un de nos développeurs résidents, il a également fait du bénévolat pour enseigner aux étudiants, partageant son expertise avec la prochaine génération.
Pour Darrius, son travail est épanouissant car il est apprécié et a un réel impact.
< 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)
Vous avez une question ? Prendre contact avec notre équipe de développement.
Vous avez une question ? Contactez notre équipe de développement.
Commencez GRATUITEMENT
Aucune carte de crédit n'est requise
Test dans un environnement réel
Testez en production sans filigranes. Fonctionne là où vous en avez besoin.
Produit entièrement fonctionnel
Obtenez 30 jours de produit entièrement fonctionnel. Faites-le fonctionner en quelques minutes.
assistance technique 24/5
Accès complet à notre équipe d'ingénieurs pendant la période d'essai du produit
Obtenez votre clé d'essai de 30 jours gratuite instantanément.
Aucune carte de crédit ou création de compte n'est nécessaire
Le formulaire d'essai a été soumis avec succès.
Votre clé d'essai devrait être dans l'e-mail. Si ce n'est pas le cas, veuillez contacter support@ironsoftware.com
Des millions d'ingénieurs dans le monde entier lui font confiance
Réservez une démo en direct gratuite
Réservez une démonstration personnelle de 30 minutes.
Pas de contrat, pas de détails de carte, pas d'engagements.
Voici ce à quoi vous pouvez vous attendre :
Une démonstration en direct de notre produit et de ses principales fonctionnalités
Obtenez des recommandations de fonctionnalités spécifiques au projet
Toutes vos questions trouvent réponse pour vous assurer de disposer de toutes les informations dont vous avez besoin. (Aucun engagement de votre part.)
CHOISIR L'HEURE
VOS INFORMATIONS
Réservez votre démo en direct gratuite
Fiable par plus de 2 millions d'ingénieurs dans le monde entier