Blinkfy

Notificações rápidas, simples e modernas para a sua aplicação React.

O nome vem de blink (piscar, chamar atenção) + fy (transformar em ação).
O Blinkfy existe para fazer suas notificações aparecerem de forma leve, clara e instantânea, sem complicação.

Recursos

• 🚀 Rápido: fácil de instalar e usar.
• 🎨 Customizável: estilos flexíveis para se adaptar ao seu design.
• 📱 Responsivo: funciona bem em qualquer dispositivo.
• 🧩 Plug & Play: pronto para integrar em poucos minutos.

📦 Instalação

npm install blinkfy
# ou
yarn add blinkfy
# ou
pnpm add blinkfy

🚀 Como usar

Envolva sua aplicação com o NotificationProvider e use o hook useNotification para disparar notificações.

import React from "react";
import { NotificationProvider, useNotification } from "blinkfy";

function App() {
  return (
    <NotificationProvider
      theme="default"
      position="top-right"
      defaultDuration={50000}
    >
      <Home />
    </NotificationProvider>
  );
}

function Home() {
  const { addNotification } = useNotification();

  return (
    <button
      onClick={() =>
        addNotification({
          title: "Sucesso!",
          description: "Sua ação foi concluída com êxito.",
          variant: "success",
        })
      }
    >
      Mostrar Notificação
    </button>
  );
}

export default App;

🎨 Propriedades

NotificationProvider

| Propriedade | Tipo | Padrão | Descrição | | --------------- | -------------------------------------------------------------------- | ------------- | -------------------------------------- | | theme | "default" | "solid" | "minimal" | "default" | Estilo visual das notificações. | | position | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | Posição onde as notificações aparecem. | | defaultDuration | number | 5000 | Tempo (ms) para a notificação sumir. |

addNotification

O método addNotification aceita:

| Propriedade | Tipo | Obrigatório | Descrição | | ----------- | ------------------------------------------------- | ----------- | -------------------------------------------- | | title | string | ✅ | Título da notificação. | | description | string | ❌ | Texto complementar. | | variant | "success" | "error" | "alert" | "info" | ❌ | Tipo de notificação (define cor/ícone). | | icon | ReactNode | ❌ | Ícone customizado. |

📌 Exemplo com ícone customizado

import { Bell } from "lucide-react";

addNotification({
  title: "Notificação customizada",
  description: "Com ícone diferente!",
  icon: <Bell />,
  variant: "info",
});

💡 Todas as variantes de notificação possuem um ícone padrão.

• Se não quiser exibir ícones, basta definir a propriedade icon como uma string vazia.
• Para substituir o ícone padrão, passe o ícone desejado na propriedade icon.
• É possível usar ícones de bibliotecas, imagens ou SVGs personalizados.

📄 Licença

Este projeto está sob a licença MIT - veja o arquivo LICENSE para mais detalhes.