@edinelsonslima/toast-notification v0.2.1

👀 Links

• 🔗 Apresentação do toast notification
• 🔗 NPM

⤵️ Instalando

Adicionar com yarn

yarn add @edinelsonslima/toast-notification

Adicionar com npm

npm install @edinelsonslima/toast-notification

👨🏻‍💻 Modo de usar

• Adicione o componente <ToastContainer/> em algum lugar da sua aplicação;
• Importe os estilos css de import '@edinelsonslima/toast-notification/style.css';

import { ToastContainer } from '@edinelsonslima/toast-notification';
import '@edinelsonslima/toast-notification/style.css';

export default function App(){
  //seu código

  return (
    <>
      <ToastContainer />
    </>
  )
}

• Disparando os toast com a função toast de dentro do @edinelsonslima/toast-notification

import { toast } from '@edinelsonslima/toast-notification';

export default function MyComponent(){
  //seu código

  const exampleToast = () => {
    toast.success({ content: "Mensagem de exemplo" })
  }

  return (
    //seu código
  )
}

🧐 Informações adicionais

O que é disponível com o pacote

As propriedades da função toast

As propriedades do componente ToastContainer

Mais detalhes sobre as propriedades

ℹ️ O duration e defaultDuration estão em ms (milissegundos)

ℹ️ A função toast pode ser chamada de algumas formas, veja os exemplos a seguir:

caso seja chamada direta, será obrigatório informa o type

toast({ content: "mensagem exemplo", type: "info", duration: 1000 * 4 })

ou pode acessar o tipo do toast diretamente, assim omitindo ele do objeto enviado

toast.info({ content: "mensagem exemplo", durantino: 1000 * 4 })

toast.info('mensagem exemplo')

toast.info(<strong>mensagem exemplo</strong>)

toast.info(<MeuComponente>mensagem exemplo</MeuComponente>)