GithubHelp home page GithubHelp logo

xtrendence / x-notify Goto Github PK

View Code? Open in Web Editor NEW
13.0 1.0 7.0 30 KB

A dependency-free JavaScript notification library.

Home Page: https://xtrendence.github.io/X-Notify

License: MIT License

HTML 26.35% JavaScript 73.65%
javascript js notifications notification library javascript-library notification-library html css

x-notify's Introduction

X:/Notify

The main goal of this library is to provide developers with a good looking notification system with a single ".js" file. All the styling and such would be included in that file.

The minified version is only 4.71 KBs, whereas the normal one is 6.9 KBs.

Demo

You can test this out here:

https://xtrendence.github.io/X-Notify/

Installation

Put "x-notify.js" in a directory such as "assets/js/", and then, in your <head> tag:

<script src="./assets/js/x-notify.js"></script>

Usage:

const Notify = new XNotify("TopLeft");
Notify.success({ 
	title: "Title", 
	description: "Description", 
	duration: 4000 
});

The above would show a notification on the top right of the screen and it'd stay there for 4 seconds before disappearing. There are quite a few options you can change, such as:

Notify.error({
	width: "300px",
	title: "Failed to Upload File",
	description: "The file you submitted couldn't be uploaded.",
	duration: 4000,
	background: "rgb(200,50,0)",
	color: "rgb(255,255,255)"
});

There are 4 different notification types: "success", "error", "alert", and "info", all of which can be used like so:

Notify.success();
Notify.error();
Notify.alert();
Notify.info();

By default, each type has a different and appropriate background and font color, though they can all be changed as shown above.

Here's a list of all the options you can use, and acceptable values:

Option Type Value Description
position String "TopRight", "BottomRight", "BottomLeft", "TopLeft" Where the notification popup would appear (this is passed to the constructor).
width String Any integer with "px", such as "100px". The width of the notification.
borderRadius String Any integer with "px", such as "20px". The border radius of the notification.
title String Usually, some short text. The title of the notification; something like "Upload Error", or "Form Submitted".
description String A longer description of the event. A description of the event the notification was shown for.
duration Integer Any integer. The duration, in milliseconds, that the notification would stay on screen for.
background String "rgb(r,g,b)", "rgba(r,g,b,a)", "#RRGGBB" The color of the background of the notification. Can be any RGB, RGBA, or hex value.
color String "rgb(r,g,b)", "rgba(r,g,b,a)", "#RRGGBB" The color of the font of the notification. Can be any RGB, RGBA, or hex value.

A full example with a button click event listener, and a fully custom notification:

document.addEventListener("DOMContentLoaded", () => {
	const Notify = new XNotify();

	let custom = document.getElementById("custom");

	custom.addEventListener("click", () => {
		Notify.info({
			width: "300px",
			borderRadius: "4px",
			title: "Customized Notification",
			description: "Description of the notification.",
			duration: 10000,
			background: "rgb(0,0,30)",
			color: "rgb(0,200,255)"
		});
	});
});

x-notify's People

Contributors

xtrendence avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

x-notify's Issues

Project lacks a license

I want to use X-Notify in a project that is intended to have a theme definition and uses less for styling. I already created a fork but noticed that your project has no explicit license. I am confident that this was just an oversight as you usually do not publish projects on github that are not meant to be Open Source. On the other hand, if this is intentionally so I will of course remove the fork. This is what github writes on the topic (see https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/licensing-a-repository):

You're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If you're creating an open source project, we strongly encourage you to include an open source license. The Open Source Guide provides additional guidance on choosing the correct license for your project.

My personal favorite is the ISC license (https://opensource.org/licenses/ISC) due to its simplicity. It also is the default license used by npm.

Annoying scrollbar

When the notification is invoked, it leaves an annoying scrollbar on the right side of the notification box, which doesn't look nice at all. I believe it can be solved by simply deleting the "overflow" property from the css in the "id=x-notify-container" element.
grafik
grafik

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.