quarz

quarz.js

Preview

This should give you an idea of how the package can be used.

import "quarz/lib/quarz.css";
import quarz from "quarz";

quarz.setup();

quarz.success("created user profile");

Medium Article

Article

Installation

npm install quarz

NPM Package

Demo

Web Demo

Importing

import "quarz/lib/quarz.css";
import quarz from "quarz";

Usage 🚀

Setup

You can either just call the method or pass some configuration adjustments to fit your needs.

quarz.setup();

quarz.setup({
  gravity: "bottom", // top or bottom
  position: 'left', // left or right
  x: 25, y: 25, // space from the side
  duration: 2000,
  delay: 100,
  mobile: {
    x: 20, y: 20,
    gravity: "top",
    position: "left"
  }
});

Notifications

quarz.success("created user profile");

quarz.error({
  title: "something went wrong",
  duration: 4000,
  delay: 200
});

quarz.warning({
  title: "your email had been changed",
  duration: 2000,
  delay: 50
});

quarz.info({
  title: "today is your cake day!",
  color: "#FFC6A5",
  duration: 5000,
  delay: 2000
});

Loading Indicators

// show a loading indicator
quarz.loading();
quarz.loading("#FFDEA5");
quarz.loading({ color: "#FFDEA5" });

// stop the loading indicator
quarz.stop();

Properties

Setup

Property	Description	Possible or Example Values
gravity	the vertical position of the loading notifications/indicators	"top", "bottom"
position	the horizontal position of the loading notifications/indicators	"left", "right"
x	the space between the left/right of the screen and the notifications/indicators	25
y	the space between the top/bottom of the screen and the notifications/indicators	25

Notifications

Property	Description	Possible or Example Values
title	the message displayed on the notification	"string"
duration	how long the notification is supposed to be visible in milliseconds	3000
delay	how long the script should wait before showing the notification in milliseconds	200
color	the color you want to override the original color (which is defined by the type) with	"#FF99E3"

Loading Indicators

Property	Description	Possible or Example Values
color	the color you want to override the original color (which is defined by the type) with	"#FF99E3"

License

MIT