Releases: PabloTheBlink/FlashyJS
Releases · PabloTheBlink/FlashyJS
1.0.3
Full Changelog: 1.0.0...1.0.3
1.0.0
Flashy.js
Flashy.js es una librería ligera y moderna para mostrar notificaciones en la web, diseñada para ser fácil de usar, altamente personalizable y compatible con múltiples entornos (global, ES Module y CommonJS). Permite crear notificaciones estilizadas con animaciones fluidas, temas, iconos y opciones de configuración flexibles.
Características
- Tipos de notificación: Success, Error, Warning, Info y Default, con estilos diferenciados.
- Posiciones: Soporte para 6 posiciones (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right).
- Animaciones: Cuatro animaciones de entrada (slide, fade, bounce, zoom) con una animación de salida suave.
- Temas: Modos claro (light) y oscuro (dark) para adaptarse a diferentes diseños.
- Personalización: Configura duración, iconos personalizados, cierre manual, callbacks para clics y cierre.
- Responsive: Optimizado para dispositivos móviles con ajustes automáticos.
- Ligero: Sin dependencias externas, con estilos CSS integrados.
- Seguridad: Escapa HTML en mensajes para prevenir XSS.
- Métodos de conveniencia: Funciones específicas para cada tipo de notificación (
flashy.success,flashy.error, etc.).
Instalación
Incluye el script en tu proyecto:
<script src="flashy.js"></script>O usa como módulo:
// ES Module
import flashy from './flashy.js';
// CommonJS
const flashy = require('./flashy.js');Uso
// Notificación básica
flashy("¡Operación exitosa!", { type: "success" });
// Notificación con opciones personalizadas
flashy("Mensaje importante", {
type: "info",
position: "bottom-right",
animation: "bounce",
theme: "dark",
duration: 5000,
closable: true,
icon: "🔔",
onClick: () => console.log("Notificación clicada"),
onClose: () => console.log("Notificación cerrada")
});
// Métodos de conveniencia
flashy.success("¡Éxito!", { animation: "zoom" });
flashy.error("Error ocurrido", { position: "top-center" });
// Cerrar todas las notificaciones
flashy.closeAll();
// Configurar opciones globales
flashy.setDefaults({ theme: "dark", duration: 3000 });Configuración
| Opción | Tipo | Descripción | Por defecto |
|---|---|---|---|
| type | String | Tipo de notificación (success, error, warning, info, default) | default |
| position | String | Posición en pantalla | top-right |
| duration | Number | Duración en milisegundos (0 para permanente) | 4000 |
| closable | Boolean | Mostrar botón de cierre | true |
| animation | String | Animación de entrada (slide, fade, bounce, zoom) | slide |
| theme | String | Tema visual (light, dark) | light |
| icon | String | Icono personalizado (emoji o HTML) | Según tipo |
| onClick | Function | Callback al hacer clic | null |
| onClose | Function | Callback al cerrar | null |
Métodos
flashy.closeAll(): Cierra todas las notificaciones.flashy.setDefaults(newDefaults): Configura opciones globales.flashy.getDefaults(): Obtiene la configuración actual.flashy.destroy(): Elimina todas las notificaciones, contenedores y estilos.
Licencia
MIT © [Tu nombre]
Versión
1.0.2
Este README proporciona una descripción clara y concisa para GitHub, destacando las funcionalidades, uso y configuración de Flashy.js. Puedes personalizar el campo "Tu nombre" y ajustar cualquier detalle adicional según tus necesidades.