Overview

"Notiffy" is a TypeScript-based notification message UI.

Modern design created using pure CSS makes it accessible for everyone to learn and apply.

Customization is possible through provided properties and supports vanilla JavaScript as well as TypeScript.

Also Supports all frameworks and platforms that use JavaScript, such as React, Vue.js, and JSP.

Promises regular debugging and continuous updates. (at least one month apart)

Below are the core features provided by default.


1. Platform Independent

No extra installations for dependencies.


2. Four Types Available

Provides "Slip", "Mole", and "Alert" types for various uses besides the "Toast".


3. Varient Events

Event-based callback triggers can be utilized.


4. Most browsers Supported

Supports major browsers such as Chrome, Edge, Firefox and Safari.


5. Automatically Responsive Size

Delivers reactive type CSS automatically for tablet and mobile devices.


6. MIT License

It is free to use because it follows the MIT license.



Usage Cautions

Global CSS may affect "DIV", "SVG" and "Path" tag.

TypeScript is optional with minimal dependencies required for module building.

In case of using Node.js, it is advisable to opt for version 18.12.0 or newer. (if possible)

Installation

Select one of the following methods to add "Notiffy" to your project.

When using NPM.

npm install notiffy

When using YARN.

yarn add notiffy

When grab from CDN.

<!-- latest version -->
<script src="https://cdn.jsdelivr.net/npm/notiffy/dist/index.js"></script>

<!-- if wanting specific version -->
<script src="https://cdn.jsdelivr.net/npm/notiffy@1.0.0/dist/index.js"></script>

Quick Start

Declare module imports.

import { Toast, Slip, Mole, Alert } from "notiffy";
// or
const { Toast, Slip, Mole, Alert } = require("notiffy");

// variable declaration
const { Toast, Slip, Mole, Alert } = notiffy;

When using "Toast" example.

Toast.warning({
  text: "hello toast."
});

How To Apply

HTML apply example using CDN.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/notiffy/dist/index.js"></script>
  </head>
  <body>
    <div>
      <button onclick="onClickButton()">Click here</button>
    </div>
  </body>
  <script>
    const { Toast } = notiffy; // global variable declaration

    const onClickButton = () => {
      Toast.warning({
        text: "hello warning toast."
      });
    };
  </script>
</html>

Functional React apply example using an imported module. (basic)

import { Toast } from "notiffy"; // import the module

const Example = (): JSX.Element => {

  const onClickButton = (): void => {
    Toast.warning({
      text: "hello warning toast."
    });
  };

  return (
    <div>
      <button onClick={ onClickButton }>Click here</button>
    </div>
  );
};

Vue.js apply example using an imported module. (basic)

<template>
  <div>
    <button @click="onClickButton">Click here</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Toast } from "notiffy"; // import the module

export default defineComponent({
  name: "ExampleView",
  setup() {
    const onClickButton = (): void => {
      Toast.warning({
        text: "hello warning toast."
      });
    };
    return {
      onClickButton
    };
  }
});
</script>

<style scoped></style>

Examples

Properties

Event

Customize

Customize default colors by adding a style sheet file.

Create a style sheet for reference in the project and add it to the header.

Change the global CSS variable value to the color you want.

Recommend Hex-Code or RGBA for values. (below are the default values)

:root {
  --notiffy-primary: #ffffff;
  --notiffy-secondary: #f1f2f3;

  --notiffy-warning: #eb8e14;
  --notiffy-warning-progress: #d77a00;

  --notiffy-error: #bd362f;
  --notiffy-error-progress: #a9221b;

  --notiffy-success: #3d8f3d;
  --notiffy-success-progress: #297b29;

  --notiffy-info: #1679ab;
  --notiffy-info-progress: #026597;

  --notiffy-overlay: RGBA(0, 0, 0, 0.4);
}
CSS Variable Name Description
--notiffy-primary font color. (when not filled)
--notiffy-secondary font color. (when filled)
--notiffy-warning main color for warning.
--notiffy-warning-progress progress bar color for warning.
--notiffy-error main color for error.
--notiffy-error-progress progress bar color for error.
--notiffy-success main color for success.
--notiffy-success-progress progress bar color for success.
--notiffy-info main color for info.
--notiffy-info-progress progress bar color for info.
--notiffy-overlay layer color for Alert.


An element ID allows modification of various CSS attributes.

Verify the element attribute values using browser's developer tools and test it to prevent layout issues.

Please provide feedback on desired properties for possible inclusion in the next update.

(below are the examle using element ID)

#notiffy-toast > div {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-family: Noto Sans, sans-serif;
}

Support

Bugs or improvement requests on GitHub issues menu.

They will be addressed promptly as soon as possible.


  1. Download CHANGELOG.md
  2. E-mail Send For Feedback
  3. Visit Github Issues Page
  4. Visit Creator Github