toastify npm (Cómo funciona para desarrolladores)

Introducción

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

¿Qué es Toastify?

React-toastify es un paquete NPM que te permite agregar notificaciones tipo "toast" personalizables a tus aplicaciones React con una configuración mínima. Ofrece una variedad de características, incluyendo diferentes tipos de notificaciones, funcionalidad de cierre automático, estilo personalizado, posibilidad de tiempo restante y más.

Instalación

Para comenzar con react-toastify, necesitas instalar el paquete a través de NPM o Yarn. Ejecuta el siguiente comando en el directorio raíz de tu proyecto:

npm install react-toastify

npm install react-toastify

o

yarn add react-toastify

yarn add react-toastify

Uso básico

Después de instalar el paquete, puedes comenzar a usar react-toastify en tu aplicación 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, necesitas importar los componentes necesarios de react-toastify:

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

js

2. Configurar Toastify

A continuación, añade el componente ToastContainer a tu aplicación.

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

js

3. Activar notificaciones de brindis

Puede activar una notificación de toast utilizando la función toast. Aquí tienes un ejemplo de código sobre 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 /> // react component inside
    </div>
  );
}

js

Funciones avanzadas

OnOpen y OnClose hooks

React-toastify ofrece varias características avanzadas que te permiten personalizar el comportamiento y la apariencia de tus notificaciones utilizando los hooks 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;

js

En este ejemplo:

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

Posiciones personalizadas

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

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

js

Duración de cierre automático

Puedes establecer la duración durante la cual se muestra un brinde utilizando la opción autoClose:

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

js

Estilo personalizado

Se puede aplicar estilo personalizado a las notificaciones emergentes usando las opciones className y estilo:

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

js

Descartar Toasts

Los mensajes emergentes se pueden cerrar programáticamente utilizando el método toast.dismiss:

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

js

Aquí tienes un ejemplo completo que demuestra el uso de varias funciones 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

SALIDA

Presentación de IronPDF

IronPDF es una potente biblioteca PDF para C# que permite a los desarrolladores 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 al formato PDF, IronPDF le tiene cubierto.

Estas son algunas de sus principales características y casos de uso:

1. Conversión de HTML a PDF

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

2. Soporte multiplataforma

IronPDF funciona sin problemas en varias plataformas, incluyendo:

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

3. Edición y Manipulación de PDFs

IronPDF te permite:

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

4. Personalización y Formateo

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

5. Cumplimiento de Normas

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

Generar documento PDF usando IronPDF y el paquete Toastify NPM

Instalar dependencias: Primero, crea un nuevo proyecto de Next.js (si aún no lo has hecho) utilizando el siguiente comando: Por favor, consulta 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"

A continuación, vaya al directorio de su proyecto:

cd my-pdf-app

cd my-pdf-app

Instale los paquetes necesarios:

npm install @ironsoftware/ironpdf
npm install react-toastify

npm install @ironsoftware/ironpdf
npm install react-toastify

Crear un PDF: Ahora, vamos a crear un ejemplo simple de generación de un PDF usando IronPDF. En tu componente de Next.js (por ejemplo, pages/index.tsx), agrega 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('');
    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

Dado que IronPDF solo se ejecuta en Node.js, a continuación agrega una API para la aplicación donde el PDF se genera usando Node.js

Crea un archivo pdf.js en la carpeta pages/api y añade 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.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

Nota: En el código anterior, añade tu propia clave de licencia

Ejecuta Tu Aplicación: Inicia tu aplicación Next.js:

npm run dev
or
yarn dev

npm run dev
or
yarn dev

SALIDA

Abra su navegador y navegue a http://localhost:3000 para ver el siguiente sitio web.

Ahora haz clic en el botón "Mostrar Toasts" para ver mensajes de toast

![toastify npm (Cómo funciona para desarrolladores): Figura 5 - Después de hacer clic en el botón Mostrar notificaciones, la aplicación muestra notificaciones emergentes para mensajes de Éxito, Advertencia y Error. Además, puede usar el campo de texto para ingresar la URL de la página web que desea convertir en un documento PDF y hacer clic en el botón "Generar PDF". Esto convertirá la página web especificada en un PDF usando IronPDF.

Ahora ingrese la URL del sitio web para generar PDF y haga clic en generar PDF. Se descargará un archivo llamado awesomeIron.pdf como se indica a continuación.

Licencia IronPDF

Página de IronPDF.

Coloque la clave de licencia en la aplicación como se muestra a continuación:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

js

Conclusión

React-toastify es una biblioteca poderosa y fácil de usar para agregar notificaciones de tipo toast a tus aplicaciones de React. Con su amplia gama de características y opciones de personalización, puedes mejorar la experiencia del usuario proporcionando retroalimentación en tiempo real de una 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 descritos en este artículo, puedes integrar rápidamente React-toastify y IronPDF en tu proyecto y comenzar a aprovechar sus capacidades.

Para obtener más información sobre cómo comenzar con IronPDF, consulte su página de documentación y ejemplos de código.