Toastr

Como utilizar

import { Toastr, showToast } from '@superlogica/design-system'

<>
  <Button
    onClick={() =>
      showToast({
        type: 'success',
        message: 'Enviado com sucesso!'
      })
    }
  >
    Enviar
  </Button>
  <Toastr />
</>

<>
  <Button
    onClick={() =>
      showToast({
        type: 'success',
        message: 'Enviado com sucesso!'
      })
    }
  >
    Enviar
  </Button>
  <Toastr />
</>

Props

O componente Toastr deve ficar numa camada mais superior, para que seja renderizado em todas as páginas. Para mostrar o toast, deve-se importar a função showToast. Essa função recebe um objeto com as propriedades type e message.

showToast

Prop	Tipo	Default	Descrição
type	`string`	`info`	Tipo de toastr que será exibido (success, info, warning, error)
message	`string`	``	Mensagem que será exibida no toastr

Toastr

Prop	Tipo	Default	Descrição
position	`string`	`top-right`	Define a posição onde o toastr irá aparecer (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)
autoClose	`bool/number`	`5000`	Tempo em ms para fechar o toastr. se setado para falso, a notificação precisa ser fechada manualmente
newestOnTop	`bool`	`false`	Novos toasts são adicionados ao topo