Toastini 🍸

Um componente de toast (notificação) elegante, customizável e leve para React, com suporte a temas e classes CSS.

📦 Instalação

# npm
npm install toastini

# yarn
yarn add toastini

# pnpm
pnpm add toastini

✨ Recursos

• 🌈 Múltiplos tipos de toast: success, error, info, warning, default
• 🧩 Posicionamento flexível: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
• 🔄 Arrastar para dispensar (draggable)
• ⏱️ Fechamento automático configurável
• 🎨 Totalmente customizável via classes CSS (compatível com Tailwind CSS e outras bibliotecas)
• 🌙 Suporte nativo a tema claro e escuro
• 📱 Responsivo e com acessibilidade
• 🦾 Totalmente tipado com TypeScript

🚀 Uso Básico

Exemplo 1: Toast Básico

import React from 'react'
import { ToastProvider, ContainerToasts, toast } from 'toastini'
import 'toastini/dist/index.css'

function App() {
  const showToast = () => {
    toast.success('Operação realizada com sucesso!')
  }

  return (
    <ToastProvider>
      <button onClick={showToast}>Mostrar Toast</button>
      <ContainerToasts />
    </ToastProvider>
  )
}

export default App

Exemplo 2: Toast com Customização de Classe CSS

import React from 'react'
import { ToastProvider, ContainerToasts, toast } from 'toastini'
import 'toastini/dist/index.css'
import './custom-toast.css' 

function App() {
  const showToast = () => {
    toast.success('Operação realizada com sucesso!', {
      className: 'my-custom-toast', 
    })
  }

  return (
    <ToastProvider>
      <button onClick={showToast}>Mostrar Toast</button>
      <ContainerToasts 
        className="custom-toast-container"
        titleClassName="custom-toast-title" 
      />
    </ToastProvider>
  )
}

export default App

🛠️ API

O componente ContainerToasts é o recipiente que mostra todos os toasts ativos.

import { ContainerToasts } from 'toastini'
import 'toastini/dist/index.css'

return (
  <ToastProvider>
    <ContainerToasts
      autoClose={5000}
      closeOnClick={true}
      draggable={true}
      newestOnTop={false}
      limit={5}
      margin={16}
      className="custom-toast"
      wrapperClassName="custom-wrapper"
      itemClassName="custom-item"
      iconClassName="custom-icon"
      contentClassName="custom-content"
      titleClassName="custom-title"
      descriptionClassName="custom-description"
      closeButtonClassName="custom-close"
    />
  </ToastProvider>
)

Propriedades do Componente ContainerToasts

| Propriedade | Tipo | Padrão | Descrição | | ------------ | -------------- | --------- | ------------------------------------------------------------- | | autoClose | number|boolean | 5000 | Tempo em ms para fechar ou false para desativar | | closeOnClick | boolean | true | Fechar ao clicar no toast | | draggable | boolean | true | Arrastar para dispensar | | newestOnTop | boolean | false | Adicionar novos toasts no topo | | limit | number | undefined | Limite de toasts exibidos | | margin | number | 16 | Margem entre os toasts |

Classes CSS Personalizáveis

| Propriedade | Descrição | | --------------------- | ------------------------------------------ | | className | Classe para o container principal do toast | | iconClassName | Classe para o ícone | | contentClassName | Classe para o container de conteúdo | | titleClassName | Classe para o título | | descriptionClassName | Classe para a descrição | | closeButtonClassName | Classe para o botão de fechar | | wrapperClassName | Classe para o wrapper externo | | itemClassName | Classe para o item individual do toast |

📢 Funções de Toast

// Toast básico
toast.show({
  title: 'Título',
  description: 'Descrição detalhada',
  type: 'success',
  position: 'top-right',
  autoClose: 3000,
  className: 'custom-toast',
})

// Helpers para tipos específicos
toast.success('Operação realizada com sucesso!')
toast.error('Ocorreu um erro!')
toast.info('Informação')
toast.warning('Atenção')
toast.default('Mensagem padrão')

// Com opções adicionais
toast.success('Título', {
  description: 'Descrição detalhada',
  position: 'bottom-center',
  autoClose: false,
  titleClassName: 'font-bold',
  descriptionClassName: 'text-sm',
})

// Trabalhando com Promises
toast.promise(asyncFunction(), {
  loading: 'Carregando...',
  success: 'Operação concluída!',
  error: 'Ocorreu um erro!',
  options: {
    position: 'bottom-right',
    autoClose: 3000
  }
})

// Com funções personalizadas para mensagens dinâmicas
toast.promise(fetchUserData(userId), {
  loading: 'Buscando dados do usuário...',
  success: (data) => `Bem-vindo, ${data.name}!`,
  error: (err) => `Erro: ${err.message}`,
  options: {
    className: 'user-toast'
  }
})

// Remover toasts
toast.remove(id)
toast.removeAll()

🎨 Customização com CSS

Usando com Tailwind CSS

Toastini funciona perfeitamente com Tailwind CSS:

<ContainerToasts
  className="bg-white dark:bg-gray-800 shadow-lg"
  iconClassName="text-blue-500"
  titleClassName="text-lg font-bold"
  descriptionClassName="text-gray-600 dark:text-gray-300"
  closeButtonClassName="hover:bg-gray-200 dark:hover:bg-gray-700"
/>

Criando seu Próprio Toast

Você pode usar o componente BaseToast para criar seus próprios componentes de toast personalizados:

import { BaseToast } from 'toastini'

function MyCustomToast() {
  return (
    <BaseToast
      title="Título personalizado"
      description="Minha descrição"
      icon={<MyIcon />}
      className="my-custom-toast"
      onClose={() => console.log('Fechado')}
    />
  )
}

Variáveis CSS

Toastini usa variáveis CSS que você pode sobrescrever para personalizar facilmente os toasts:

:root {
  /* Tema claro (valores de exemplo) */
  --toast-success-bg: #f0fff4;
  --toast-success-border: #c6f6d5;
  --toast-success-text: #276749;
  
  /* Outras variáveis: error, info, warning, default... */
}

[data-theme="dark"] {
  /* Tema escuro (valores de exemplo) */
  --toast-success-bg: rgba(39, 103, 73, 0.3);
  --toast-success-border: #276749;
  --toast-success-text: #c6f6d5;
  
  /* Outras variáveis para o tema escuro... */
}

📝 Licença

MIT

👤 Autor

Pedro Camargo (@PedroCamargo-dev)