Search by

tobento / js-notifier

TOBENTOch

Simple JavaScript notifier to show notifications.

Package info

github.com/tobento-ch/js-notifier

Homepage

Language:JavaScript

pkg:composer/tobento/js-notifier

Security

Advisories: 0

Aikido package health analysis

Transparency log

Statistics

Installs: 48

Dependents: 3

Suggesters: 0

Stars: 0

Open Issues: 0

1.0.1 2024-12-30 16:20 UTC

Requires

None

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

None

MIT ef9e98eec607af98694abbd0ef3c2efb0f7f58a7

notificationnotifiertobento

Published on Packagist.org on 2024-12-30 16:21 UTC

This package is auto-updated.

Last update: 2026-08-29 03:11:59 UTC

README

Simple JavaScript notifier to show notifications.

Table of Contents

Getting started

Browser support

Modern browser only.

Documentation

Basic Usage

1. Include CSS/JS

<link href="notifier.css" rel="stylesheet" type="text/css">

2. Import Notifier And Send A Notification

import notifier from "notifier.js";

const notification = notifier.send({
    status: 'success',
    title: 'Lorem',
    text: 'Lorem ipsum.',
});

Parameters

Parameter Value Description
action {title: "View ...", url: "https://example.com/slug", classes: ["button"]} You may set an action displayed using an a element.
autotimeout 5000, null If defined, the notification will be closed after the milliseconds passed.
classes ["notification", "notification-fade"] You may set custom CSS classes to the notification element.
icon "<svg ... /></svg>" You may add a custom icon.
id "ID" A unique notification id.
removeDelay 500 Milliseconds after the notification will be removed. You may change this value if you have a custom animation, other than fade in and out.
showCloseButton false If false close button will not be displayed at all.
showIcon false If false icon will not be displayed at all.
stack "name" A stack name. See stack section to learn more.
status "success", "error", "warning", "info" The notification status.
text "Lorem ipsum" A text to be displayed.
title "Lorem" A title to be displayed.

All parameters are optional but you must specify title or text at least.

Methods

import notifier from "notifier.js";

const notification = notifier.send({
    status: 'success',
    title: 'Lorem',
    autotimeout: null,
});

// close after 2000 milliseconds:
notification.close(2000);

Stacks

By default, notifications will be pushed to the default stack which will be positioned top right. You may create more stacks by the following way:

1. Create the CSS class

Name your class like .notification-stack-stack-name:

.notification-stack-secondary {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 50;
  width: 400px;
}

2. Define the stack within you notifiaction

import notifier from "notifier.js";

const notification = notifier.send({
    stack: 'secondary',
    title: 'Lorem',
});

Credits