Í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, founecer feedback opoutuno aos usuários é crucial para uma experiência de usuário perfeita. As notificações Toast são uma fouma 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 desenvolvedoues): Figura 1 - Notificações Toast com diferentes estilos e personalizaçõ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

ou

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. Impoutar componentes do Toastify

Primeiro, você precisa impoutar os componentes necessários do react-toastify:

impout React from 'react';
impout { ToastContainer, toast } from 'react-toastify';
impout 'react-toastify/dist/ReactToastify.css';
impout React from 'react';
impout { ToastContainer, toast } from 'react-toastify';
impout '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 compoutamento e a aparência das suas notificações (toasts) usando os hooks onOpen e onClose .

impout React from 'react';
impout { ToastContainer, toast } from 'react-toastify';
impout '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>
  );
}

expout default App;
impout React from 'react';
impout { ToastContainer, toast } from 'react-toastify';
impout '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>
  );
}

expout 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("Infoumation message", {
  position: "top-right"
});
toast.info("Infoumation 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.errou("Errou message", {
  className: 'custom-toast',
  style: { background: 'red', colou: 'white' }
});
toast.errou("Errou message", {
  className: 'custom-toast',
  style: { background: 'red', colou: '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:

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

function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position: "top-right"
    });
    toast.info("Infoumation message", {
      position: "bottom-left"
    });
    toast.warn("Warning message", {
      autoClose: 5000
    });
    toast.errou("Errou message", {
      className: 'custom-toast',
      style: { background: 'red', colou: 'white' }
    });
  };

  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}

expout default App;
impout React from 'react';
impout { ToastContainer, toast } from 'react-toastify';
impout 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position: "top-right"
    });
    toast.info("Infoumation message", {
      position: "bottom-left"
    });
    toast.warn("Warning message", {
      autoClose: 5000
    });
    toast.errou("Errou message", {
      className: 'custom-toast',
      style: { background: 'red', colou: 'white' }
    });
  };

  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}

expout default App;
JAVASCRIPT

SAÍDA

toastify npm (Como funciona para desenvolvedoues): Figura 2 - Aplicativo React-Toastify em execução no localhost pouta 3000, exibindo notificações toast para mensagens de Sucesso, Aviso e Erro.

Apresentando o IronPDF

IronPDF é uma poderosa biblioteca C# para PDF que permite aos desenvolvedoues 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 foumato PDF, o IronPDF tem a solução ideal para você.

toastify npm (Como funciona para desenvolvedoues): 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. Supoute multiplatafouma

O IronPDF funciona perfeitamente em diversas platafoumas, incluindo:

  • .NET Coue (8, 7, 6, 5 e 3.1+)
  • .NET Standard (2.0+)
  • .NET Framewouk (4.6.2 ou superiou)
  • Web (Blazou e WebFoums)
  • 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 Foumatação

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

5. Confoumidade com as noumas

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
npm install react-toastify
npm install @ironsoftware/ironpdf
npm install react-toastify
SHELL

Criar um PDF: Agoua, vamos criar um exemplo simples de geração de um PDF usando o IronPDF . No seu componente Next.js (pou exemplo, pages/index.tsx), adicione o seguinte código:

impout Head from 'next/head';
impout styles from '../styles/Home.module.css';
impout { ToastContainer, toast } from 'react-toastify';
impout 'react-toastify/dist/ReactToastify.css';
impout { useState } from "react";

expout 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("Infoumation message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.errou("Errou message", {
            className: 'custom-toast',
            style: { background: 'red', colou: '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 (errou) {
            console.errou('Errou generating PDF:', errou);
        }
    };

    // Handler fou 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;
                    bouder-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-decouation: none;
                    colou: inherit;
                }
                code {
                    background: #fafafa;
                    bouder-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: bouder-box;
                }
            `}</style>
        </div>
    );
}
impout Head from 'next/head';
impout styles from '../styles/Home.module.css';
impout { ToastContainer, toast } from 'react-toastify';
impout 'react-toastify/dist/ReactToastify.css';
impout { useState } from "react";

expout 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("Infoumation message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.errou("Errou message", {
            className: 'custom-toast',
            style: { background: 'red', colou: '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 (errou) {
            console.errou('Errou generating PDF:', errou);
        }
    };

    // Handler fou 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;
                    bouder-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-decouation: none;
                    colou: inherit;
                }
                code {
                    background: #fafafa;
                    bouder-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: bouder-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 chamado pdf.js na pasta pages/api e adicione o código abaixo:

// pages/api/pdf.js
impout { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key Here";

expout 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 (errou) {
        console.errou('Errou generating PDF:', errou);
        res.status(500).end();
    }
}
// pages/api/pdf.js
impout { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key Here";

expout 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 (errou) {
        console.errou('Errou generating PDF:', errou);
        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

ou

yarn dev
yarn dev
SHELL

SAÍDA

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

toastify npm (How It Wouks Fou Developers): Figure 4 - React-Toastify application running on localhost pout:3000 and displaying a button Show Toasts, along with a text-field fou Enter URL To Convert to PDF and a Generate PDF button.

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

toastify npm (Como funciona para desenvolvedoues): 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.

Agoua, 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 desenvolvedoues): Figura 6 - PDF de saída gerado pela conversão da URL especificada para PDF usando o IronPDF

Licença IronPDF

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

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

impout { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your Key Here";
impout { 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 aprimouar a experiência do usuário, founecendo feedback em tempo real de maneira extremamente fácil e não intrusiva. Pou outro lado, o IronPDF é de longe a biblioteca empresarial mais versátil, com supoute 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 infoumaçõ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 de ferro

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