Skip to content

Latest commit

 

History

History
124 lines (79 loc) · 2.99 KB

README.md

File metadata and controls

124 lines (79 loc) · 2.99 KB
Raw

Notico

A Powerful and beautiful Library for showing JS Notifications

Notification Gif

Tech 🛠️ Languages and Tools :

HTML  CSS  JS 
  • JavaScript : Core functionality is built with JavaScript
  • HTML (hidden in JavaScript) : Structure of the notification built with HTML
  • CSS (hidden in JavaScript) : Styles and blur effect of the notification built with CSS

Installation

Via NPM (better performance) :

Prerequisites :

Ensure Node.js and npm are installed on your system.

  • If you already have Node.js and npm installed, skip to Step 4.

Step 1 : Download the Nodejs

Visit Nodejs website and download latest LTS (Long Time Support) version

Step 2 : Install Nodejs and NPM

Just run the installer and be sure check install Nodejs and NPM.

Step 3 : Verify the installation

You can check if you install Nodejs and npm correctly by these commands :

node -v
npm -v

If you see version numbers, the installation was successful.

Step4 : Install Notico Library

You can install the npm package this command (install latest version):

npm install notico

Or actually using this one for specific version :

npm install notico@1.0.2

Then add this line into your HTML code :

<script src="./node_modules/notico/Package/notico.js" defer></script>

Note: if you have a Nodejs Project for web applications it recommended to install this library with this way because this way has better performance than the other way.

Via CDN (easy to use):

You can use this script line for using the CDN :

<script src="https://cdn.jsdelivr.net/npm/notico@1.0.2/Package/notico.js" defer></script>

Note: If you dont work with Nodejs and NPM then use this way.

Tutorial

Use Function in HTML or JS Code

HTML use :

Create a button like this :

<button onclick="showToast.info({})">info</button>

JS use :

Call that function in js :

showToast.info({});

Options

You can enter your parameters :

showToast.success({
    title: 'success',
    message: 'This is an success message',
    time: 7000
});

In this function you can write the title, message and time.

If no parameters are provided, default values will be used. :

Title would be the type, message would be nothing or "" and time would be 7000 ms.

If your time parameter is smaller than 2000 ms then it ignore yours and would be 2000 ms.

License

Notico is licensed under the MIT License.