👀 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

| função | propriedades | |--------------------|------------------------------------------------------------| | ToastContainer | classNames position defaultDuration | | toast | content type duration | | style | /style.css |

As propriedades da função toast

|propriedade | toast | |--------------------|----------------------------------------------------------- | | content | A conteúdo que aparecerá dentro do toast | | type | Define o tipo de toast que é para aparecer | | duration | O tempo que o toast irá permanecer em tela |

As propriedades do componente ToastContainer

|propriedade | ToastContainer | |--------------------|----------------------------------------------------------- | | classNames | Um objeto de chave:valor onde a chave é o tipo de toast e o valor pode ser uma string (classNames) ou um objeto (CSSProperties) | | position | Define em qual parte da tela irá aparecer a toast notification, existe valores predefinidos | | defaultDuration | Define tempo padrão de duração de todas as toast |

Mais detalhes sobre as propriedades

| propriedade |tipo | é obrigatório | padrão | |-----------------|---------|-----------------|-------------| | content |ReactNode| sim | - | | type |string | sim | - | | duration |number | não | 7_0000 | | defaultDuration |number | não | - | | classNames |object | não | undefined | | position |string | não | right-top |

ℹ️ 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>)