@f94leo/notifying v0.0.0

@lf/notify

This package, written in vanilla JavaScript and CSS, allows you to easily add notifications in your web project.

Installation

$ npm i @lf/notify

Features

• Super easy to customize with variables css
• Customize colors, icons and positions
• Pause toast when is hover and/or when the window loses focus
• Possibility to update a toast
• Can remove all toast
• Fancy progress bar to display the remaining time
• onClose hooks.

Default variables css

:root {
  /*! Color palette */
  --success: hsl(152, 66%, 36%);
  --info: hsl(216, 96%, 56%);
  --warning: hsl(45, 96%, 56%);
  --danger: hsl(354, 76%, 56%);
  --load: hsl(45, 96%, 56%);
  --white: hsl(0, 0%, 96%);
  --black: hsl(0, 0%, 16%);
  /*! width of site content for full size toast */
  --site-content: 88vw;
  /*! Style toast continer */
  --toast-width: 24rem;
  --toast-padding: 1rem;
  --toast-gap: 1rem;
  /*! Style toast message */
  --message-font-size: 1rem;
  --message-title-font-size: 1.25rem;
  --message-padding: 1.25rem 1.5rem;
  --message-border-radius: 0.75rem;
  --message-border-width: 1.6px;
  --message-transition: all 365ms ease-in-out;
  --progress-bar-height: 3px;
  /*! Icons */
  --icon-font-family: symbol;
  --icon-font-weight: 400;
  --icon-font-size: 1.5rem;
  --icon-xmark: "\2715";
  --icon-success: "\2713";
  --icon-info: "\2139";
  --icon-warning: "\26A0";
  --icon-danger: "\2717";
  --icon-load: "\27F3";
}

Options

Functions

Demo

import { Toast, clearToast } from "@lf/notify";

const notify = new Toast({
  title: "Title",
  message: "Lorem ipsum dolor sit amet consectetur.",
  color: "load",
});

notify.update({
  title: "New title",
  message: "Change the options here",
  color: "success",
});

clearToast();