npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dl-notificator

v1.0.3

Published

Componente contruido en js para mostrarle informacion al usuario mediante notificaciones temporales

Downloads

15

Readme

Notificator

Componente que permite realizar notificaciones en la pantalla para brindarle al usuario información importante, por ejemplo: cuando una operación es exitosa o cuando ocurrió un error o simplemente para advertirle algo o cualquier otra cosa.

Cómo funciona

Este componente manipula el DOM directamente con javascript para agregar / eliminar las notificaciones.

Demo

Presiona aquí

Cómo usarlo

¡ Recuerda verificar la versión que vas a usar !

1.- Uso como script

<script src="https://unpkg.com/[email protected]/lib/functionallibrary.umd.js"></script>
<script src="https://unpkg.com/[email protected]/lib/umd.js"></script>
const notification = new window.DlNotificator.default();

2.- Instalar componente

npm install dl-notificator

3.- Configuración global

Solo en la configuración global se define si la notificación sale por la derecha o izquierda.

El valor de z-index también es definido en la configuración global

import Notificator from 'dl-notificator';

const notification = new Notificator({
	duration: number, // milisegundos, por defecto 4000 ms
	errorOptions: {
		backgroundColor string, // por defecto #EC0B43
		color: string, // por defecto white
		closeBtn: boolean, // por defecto false
		duration: number, // por defecto 4000ms
	},
	infoOptions: {
		backgroundColor string, // por defecto #06f
		color: string, // por defecto white
		closeBtn: boolean, // por defecto false
		duration: number, // por defecto 4000ms
	},
	left: true,
	successOptions: {
		backgroundColor string, // por defecto #2EDC76
		color: string, // por defecto white
		closeBtn: boolean, // por defecto false
		duration: number, // por defecto 4000ms
	},
	top: number, // px, por defecto 10
	warningOptions: {
		backgroundColor string, // por defecto #FFBC42
		color: string, // por defecto white
		closeBtn: boolean, // por defecto false
		duration: number, // por defecto 4000ms
	},
	zIndex: number, // por defecto 999
});
...
...
try {
	await http...
	notification.success('Usuario creado con éxito');
} catch (error) {
	notification.error('Usuario ya registrado');
}

3.- Configuración específica

import Notificator from 'dl-notificator';

const notification = new Notificator();
...
...
await http...
	notification.success({
		backgroundColor: '#4CB944',
		message: 'Usuario creado con éxito',
		time: 1600,
	});
} catch (error) {
	notification.error({
		color: '#F5EE9E',
		closeBtn: true,
		message: 'Usuario ya existe',
		time: 5600,
	});
}

Jerarquía

Es importante indicar que existe jerarquía en las propiedades que se definen para una notificación.

Nivel Base General

Propiedades definidas de forma general en la configuración global o cuando se instancia la clase new Notificator:

const notification = new Notificator({
	duration: 3000,
})

En este caso todas las notificaciones tendrán la misma duración de 3000ms

Nivel Base Específica

Propiedades definidas de forma específica para cada tipo de notificación cuando se instancia la clase new Notificator.

const notification = new Notificator({
	duration: 3000,
	successOptions: {
		...
		duration: 5000,
		...
	},
})

En este caso solo la notificación de tipo success tendrá una duración de 5000ms mientras que las demás 3000ms.

Nivel Específico

Propiedades definidas justo antes de mostrar la notificación.

const notification = new Notificator({
	duration: 3000,
	successOptions: {
		...
		duration: 5000,
		...
	},
});
...
...
...
// A
notification.success({
	message: 'Texto de la notificación',
	duration: 1500,
});

//B
notification.success('Texto de la notificación');

En este caso la notificación A del tipo success tendrá un tiempo de duración de 1500ms mientras que la B durará 5000ms. Las otras (error, info y warning) tendrán 3000ms de duración.

Tipos de Notificaciones

  • Error: notification.error()
  • Information: notification.info()
  • Success: notification.success()
  • Warning: notification.warning()

Callback

Es posible pasar un callback al momento de ejecutar el notificador de manera tal de ejecutar cualquier acción después que la notificación finaliza

notification.info('Texto de la notificación', () => {
	// este código se ejecutará después de la notificación. eg. recargar la pantalla (location.reload())
});

Estilos

Nombre de las clases, estilos por defectos y cómo acceder a ellos para modificarlos.

nota: Debes agregar !important a los estilos que agregues.

[class ^= 'notification-container-'] {
	position: fixed;
	right: 0;
	top: 10px;
	width: fit-content;
	z-index: 999;
}
[class ^= 'notification-'] {
	animation-name: entering-${this.uuid};
	border-radius: 5px;
	color: white;
	margin: 0.5rem 1rem;
	max-width: 15rem;
	min-width: 12rem;
	padding: 1rem;
	position: relative;
}