notiffy

v1.0.3

Published

2 months ago

TypeScript-based notification message UI.

Downloads

101

0High
0Medium
0Low

devcheeze

javascript typescript message notification notify toast slip mole alert

👋 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.

Platform Independent
Four Types Available
Varient Events
Most browsers Supported
Automatically Responsive Size
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/[email protected]/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>

🔗 More Infomation

Click Here for document and examples.
Click Here to send feedback to the creator by email.

Published

Vulnerabilities

Links

Maintainers

Keywords