Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF for Node.js
  2. Blog do IronPDF for Node.js
  3. Ajuda do Node
  4. toastify npm
AJUDA DO NODE

toastify npm (Como funciona para desenvolvedores)

Darrius Serrant
Darrius Serrant
Atualizado:

No desenvolvimento web moderno, fornecer feedback oportuno aos usuários é crucial para uma experiência de usuário perfeita. As notificações Toast são uma forma eficaz de enviar mensagens sem interromper o fluxo de trabalho do usuário. O pacote React-toastify é uma escolha popular para implementar notificações toast em aplicações React devido à sua simplicidade e flexibilidade. Analisaremos também o pacote IronPDF NPM para gerar, editar e gerenciar documentos PDF. Este artigo irá guiá-lo pelo processo de integração do React-toastify e do IronPDF em seu projeto React.

O que é o Toastify?

React-toastify é um pacote NPM que permite adicionar notificações toast personalizáveis ​​aos seus aplicativos React com configuração mínima. Ele oferece uma variedade de recursos, incluindo diferentes tipos de notificação, funcionalidade de fechamento automático, estilos personalizados e muito mais.

toastify npm (Como Funciona para Desenvolvedores): Figura 1 - Notificações toast com diferentes estilos e customizações usando o pacote React-Toastify.

Instalação

Para começar a usar o react-toastify , você precisa instalar o pacote via NPM ou Yarn. Execute o seguinte comando no diretório raiz do seu projeto:

npm install react-toastify
npm install react-toastify
SHELL

or

yarn add react-toastify
yarn add react-toastify
SHELL

Uso básico

Após instalar o pacote, você pode começar a usar o react-toastify em sua aplicação React. Abaixo, segue um exemplo de código simples para demonstrar como integrar e usar o react-toastify.

1. Importar componentes do Toastify

Primeiro, você precisa importar os componentes necessários do 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. Configure o Toastify

Em seguida, adicione o componente ToastContainer ao seu aplicativo.

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

3. Acionar notificações Toast

Você pode acionar uma notificação pop-up usando a função toast. Aqui está um exemplo de código de como exibir uma mensagem de sucesso:

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

Recursos avançados

Ganchos OnOpen e OnClose

O React-toastify oferece diversos recursos avançados que permitem personalizar o comportamento e a aparência das suas notificações (toasts) usando os hooks onOpen e 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

Neste exemplo:

  • Quando a notificação (toast) é exibida, o gancho onOpen é acionado e exibimos um alerta.
  • Quando a notificação é fechada, o gancho onClose é acionado e outro alerta é exibido.

Posições personalizadas

Você pode exibir notificações em diferentes posições na tela usando a opção de posição:

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

Duração do fechamento automático

Você pode definir a duração de exibição de uma notificação usando a opção autoClose :

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

Estilização personalizada

É possível aplicar estilos personalizados às notificações usando as opções className e 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

Dispensando brindes

As notificações (toasts) podem ser descartadas programaticamente usando o 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

Aqui está um exemplo completo demonstrando o uso de vários recursos do 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

SAÍDA

toastify npm (Como Funciona para Desenvolvedores): Figura 2 - Aplicação React-Toastify rodando no localhost porta:3000 e exibindo notificações toast para mensagens de Sucesso, Aviso e Erro.

Apresentando o IronPDF

IronPDF é uma poderosa biblioteca C# para PDF que permite aos desenvolvedores gerar e editar PDFs em seus projetos .NET . Seja para criar PDFs a partir de HTML, manipular PDFs existentes ou converter páginas da web para o formato PDF, o IronPDF tem a solução ideal para você.

toastify npm (Como Funciona para Desenvolvedores): Figura 3 - IronPDF for Node.js: A Biblioteca PDF for Node.js

Aqui estão alguns recursos e casos de uso principais:

1. Conversão de HTML para PDF

O IronPDF pode converter páginas HTML, seja a partir de uma URL, arquivo HTML ou string HTML, em PDF. Você também pode converter arquivos HTML locais ou strings HTML em PDFs.

2. Suporte multiplataforma

O IronPDF funciona perfeitamente em diversas plataformas, incluindo:

  • .NET Core (8, 7, 6, 5 e 3.1+) *.NET Standard (2.0+)
  • .NET Framework (4.6.2 ou superior)
  • Web (Blazor e WebForms)
  • Desktop (WPF e MAUI)
  • Console (Aplicativo e Biblioteca)
  • Ambientes Windows, Linux e macOS.

3. Edição e manipulação de PDFs

O IronPDF permite que você:

4. Personalização e Formatação

Você pode aplicar modelos de página, cabeçalhos, rodapés, números de página e margens personalizadas. O IronPDF suporta codificação de caracteres UTF-8, URLs base, codificação de recursos e muito mais.

5. Conformidade com as normas

O IronPDF adere a vários padrões de PDF, incluindo as versões PDF (1.2 - 1.7), PDF/UA (PDF/UA-1) e PDF/A (PDF/A-3b).

Gere um documento PDF usando o pacote NPM IronPDF e Toastify.

Instale as dependências: Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte comando. Consulte a página de configuração .

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

Em seguida, navegue até o diretório do seu projeto:

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

Instale os pacotes necessários:

npm install @ironsoftware/ironpdf, react-toastify

Criar um PDF: Agora, vamos criar um exemplo simples de geração de um PDF usando o IronPDF . No seu componente Next.js (por exemplo, pages/index.tsx), adicione o seguinte 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

Como o IronPDF só funciona com Node.js, o próximo passo é adicionar uma API para o aplicativo onde o PDF é gerado usando Node.js

Crie um arquivo pdf.js na pasta pages/api e adicione o código abaixo:

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

Observação: No código acima, adicione sua própria chave de licença.

Execute seu aplicativo: Inicie seu aplicativo Next.js:

npm run dev
npm run dev
SHELL

or

yarn dev
yarn dev
SHELL

SAÍDA

Abra seu navegador e acesse http://localhost:3000 para visualizar o site abaixo:

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.

Agora clique no botão "Mostrar notificações" para ver as mensagens de notificação.

toastify npm (Como funciona para desenvolvedores): Figura 5 - Após clicar no botão Mostrar Toasts, o aplicativo exibe notificações toast para mensagens de Sucesso, Aviso e Erro. Além disso, você pode usar o campo de texto para inserir o URL da página da web que deseja converter em um documento PDF e clicar no botão Gerar PDF. Isso converterá a página da web especificada em um PDF usando o IronPDF.

Agora, insira o endereço de um site para gerar um PDF e clique em "Gerar PDF". Um arquivo chamado awesomeIron.pdf será baixado.

toastify npm (Como Funciona para Desenvolvedores): Figura 6 - PDF de saída gerado convertendo o URL especificado para PDF usando IronPDF

Licença IronPDF

Para obter informações sobre a licença do IronPDF , consulte a página de Licenciamento do IronPDF .

Insira a chave de licença no aplicativo conforme mostrado abaixo:

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

Conclusão

React-toastify é uma biblioteca poderosa e fácil de usar para adicionar notificações toast aos seus aplicativos React. Com sua ampla gama de recursos e opções de personalização, você pode aprimorar a experiência do usuário, fornecendo feedback em tempo real de maneira extremamente fácil e não intrusiva. Por outro lado, o IronPDF é de longe a biblioteca empresarial mais versátil, com suporte para gerar, editar e gerenciar documentos PDF. Seguindo os passos descritos neste artigo, você poderá integrar rapidamente o React-toastify e o IronPDF ao seu projeto e começar a aproveitar seus recursos.

Para obter mais informações sobre como começar a usar o IronPDF, consulte a página de documentação e os exemplos de código .

Darrius Serrant
Darrius Serrant
  Converse agora mesmo com a equipe de engenharia.
Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Equipe de Suporte Iron

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim