AYUDA DE NODE

toastify npm (Cómo funciona para desarrolladores)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Actualizado:18 de enero de 2026

En el desarrollo web moderno, propocionar retroalimentación opotuna a los usuarios es crucial para una experiencia de usuario fluida. Las notificaciones emergentes son una foma efectiva de transmitir mensajes sin interrumpir el flujo de trabajo del usuario. El paquete React-toastify es una opción popular para implementar notificaciones emergentes en aplicaciones de React debido a su simplicidad y flexibilidad. También examinaremos el paquete NPM IronPDF para generar, editar y gestionar documentos PDF. Este artículo le guiará a través del proceso de integración de React-toastify e IronPDF en su proyecto de React.

¿Qué es Toastify?

React-toastify es un paquete NPM que le permite añadir notificaciones emergentes personalizables a sus aplicaciones de React con una configuración mínima. Ofrece una variedad de características, incluyendo diferentes tipos de notificaciones, funcionalidad de cierre automático, estilos personalizados, y más.

toastify npm (Cómo funciona para desarrolladoes): Figura 1: Notificaciones Toast con diferentes estilos y personalizaciones usando el paquete React-Toastify.

Instalación

Para comenzar con react-toastify, necesita instalar el paquete a través de NPM o Yarn. Ejecute el siguiente comando en el directoio raíz de su proyecto:

npm install react-toastify

npm install react-toastify

SHELL

yarn add react-toastify

yarn add react-toastify

SHELL

Uso básico

Después de instalar el paquete, puede comenzar a usar react-toastify en su aplicación de React. A continuación, se muestra un ejemplo de código simple para demostrar cómo integrar y usar react-toastify.

1. Importar componentes de Toastify

Primero, necesita importar los componentes necesarios 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. Configurar Toastify

A continuación, añada el componente ToastContainer a su aplicación.

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

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

JAVASCRIPT

3. Activar notificaciones Toast

Puede activar una notificación emergente usando la función toast. Aquí hay un ejemplo de código de cómo mostrar un mensaje de éxito:

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

Características avanzadas

OnOpen y OnClose hooks

React-toastify ofrece varias características avanzadas que le permiten personalizar el compotamiento y la apariencia de sus notificaciones utilizando ganchos onOpen y 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

En este ejemplo:

Cuando la notificación se abre, el gancho onOpen se activa, y mostramos una alerta.
Cuando la notificación se cierra, el gancho onClose se activa, y se muestra otra alerta.

Puestos a medida

Puede mostrar notificaciones en diferentes posiciones de la pantalla utilizando la opción de posición:

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

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

JAVASCRIPT

Duración del cierre automático

Puede establecer la duración durante la cual se muestra una notificación utilizando la opción autoClose:

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

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

JAVASCRIPT

Estilos personalizados

Se puede aplicar estilización personalizada a las notificaciones usando las opciones className y 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

Brindis de despedida

Las notificaciones pueden ser descartadas programáticamente usando el método 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

Aquí hay un ejemplo completo que demuestra el uso de varias características 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

PRODUCCIÓN

toastify npm (Cómo funciona para desarrolladoes): Figura 2: aplicación React-Toastify ejecutándose en el puerto localhost: 3000 y mostrando notificaciones para mensajes de éxito, advertencia y error.

Presentando IronPDF

IronPDF es una poderosa biblioteca PDF de C# que permite a los desarrolladoes generar y editar PDFs en sus proyectos .NET. Ya sea que necesite crear PDFs a partir de HTML, manipular PDFs existentes o convertir páginas web a formato PDF, IronPDF está a su disposición.

toastify npm (Cómo funciona para desarrolladoes): Figura 3 - IronPDF for Node.js: La biblioteca PDF de Node.js

Aquí hay algunas características clave y casos de uso:

1. Conversión de HTML a PDF

IronPDF puede convertir páginas HTML, ya sea desde una URL, archivo HTML, o cadena HTML, en PDF. También puede convertir archivos HTML locales o cadenas HTML a PDFs.

2. Soporte multiplataforma

IronPDF funciona perfectamente a través de varias plataformas, incluyendo:

.NET Core (8, 7, 6, 5, y 3.1+)
.NET Standard (2.0+)
.NET Framework (4.6.2+)
Web (Blazor & WebForms)
Escritorio (WPF & MAUI)
Consola (Aplicación & Biblioteca)
Entornos de Windows, Linux y macOS.

3. Edición y manipulación de PDF

IronPDF le permite:

Establecer propiedades y seguridad (contraseñas, permisos).
Añadir firmas digitales.
Comprimir archivos PDF.
Editar metadatos y el historial de revisiones.
Agregar, copiar y eliminar páginas.

4. Personalización y formato

Puede aplicar plantillas de página, encabezados, pies de página, números de página y márgenes personalizados. IronPDF admite codificación de caracteres UTF-8, URL base, codificación de activos, y más.

5. Cumplimiento de estándares

IronPDF se adhiere a varios estándares PDF, incluidos las versiones PDF (1.2 - 1.7), PDF/UA (PDF/UA-1) y PDF/A (PDF/A-3b).

Generación de documentos PDF con IronPDF y el paquete NPM Toastify

Instalar dependencias: primero, cree un nuevo proyecto Next.js (si aún no lo ha hecho) usando el siguiente comando. Por favor, consulte la página de configuración.

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

A continuación, navega al directorio de tu proyecto:

cd my-pdf-app

cd my-pdf-app

SHELL

Instale los paquetes requeridos:

npm install @ironsoftware/ironpdf
npm install react-toastify

npm install @ironsoftware/ironpdf
npm install react-toastify

SHELL

Crear un PDF: ahora, creemos un ejemplo simple de generación de un PDF usando IronPDF . En tu componente de Next.js (por ejemplo, pages/index.tsx), añade el siguiente código:

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

Ya que IronPDF solo funciona en Node.js, a continuación añada una API para la aplicación donde se generará el PDF usando Node.js.

Cree un archivo pdf.js en la carpeta pages/api y agregue el siguiente código:

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

Nota: En el código anterior, agregue su propia clave de licencia.

Ejecute su aplicación: Inicie su aplicación Next.js:

npm run dev

npm run dev

SHELL

yarn dev

yarn dev

SHELL

PRODUCCIÓN

Abra su navegador y navegue a http://localhost:3000 para ver el sitio web a continuación:

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.

Ahora haga clic en el botón "Show Toasts" para ver los mensajes emergentes.

Ahora ingrese una URL de sitio web para generar un PDF y haga clic en "Generate PDF". Se descargará un archivo llamado awesomeIron.pdf.

toastify npm (Cómo funciona para desarrolladoes): Figura 6: PDF de salida generado al convertir la URL especificada a PDF usando IronPDF

Licencia de IronPDF

Para información sobre la licencia de IronPDF, por favor consulte la página de Licencia de IronPDF.

Para iniciar con IronPDF, instálalo.

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

Conclusión

React-toastify es una biblioteca potente y fácil de usar para añadir notificaciones emergentes a sus aplicaciones de React. Con su amplia gama de características y opciones de personalización, puede mejorar la experiencia del usuario proporcionando retroalimentación en tiempo real de manera súper fácil y no intrusiva. Por otro lado, IronPDF es, con mucho, la biblioteca empresarial más versátil con soporte para generar, editar y gestionar documentos PDF. Siguiendo los pasos mencionados en este artículo, puede integrar rápidamente React-toastify e IronPDF en su proyecto y comenzar a aprovechar sus capacidades.

Para más información sobre cómo empezar con IronPDF, por favor consulte su página de documentación y los ejemplos de código.

Darrius Serrant

Chatea con el equipo de ingeniería ahora

Ingeniero de Software Full Stack (WebOps)

Darrius Serrant tiene una licenciatura en Ciencias de la Computación de la Universidad de Miami y trabaja como Ingeniero de Marketing WebOps Full Stack en Iron Software. Atraído por la programación desde joven, vio la computación como algo misterioso y accesible, convirtiéndolo en el ...