A JavaScript/TypeScript notification, confirmation, and prompt library.

Notifications can display as toast style, snackbar style, banners, dialogs, alerts, or desktop notifications (using the Web Notifications spec) with fall back to an in-browser notice.

PNotify provides a unique notification flow called modalish that provides a good user experience, even when many notifications are shown at once.

<h1>Demos</h1>

Latest Stable - http://sciactive.com/pnotify/

Development - https://sciactive.github.io/pnotify/

<h1>Table of Contents</h1>

Getting Started
- Documentation for Old Versions
- Migrating from PNotify 4
Installation
Styles
Creating Notices
Options
- Changing Defaults
Modules
Exported Methods and Properties
Instance Methods and Properties
- Events
Stacks
- Example Stack
Features
Browser Compatibility and Build Size
Licensing and Additional Info

Getting Started

You can get PNotify using NPM or Yarn. (You can also use jsDelivr.)

You should install the packages you need individually. Alternatively, you can install all of them at once with the pnotify package.

# Install the packages you need individually.

# You definitely need this one.
npm install --save-dev @pnotify/core
# These are the optional ones.
npm install --save-dev @pnotify/animate
npm install --save-dev @pnotify/bootstrap3
npm install --save-dev @pnotify/bootstrap4
npm install --save-dev @pnotify/confirm
npm install --save-dev @pnotify/countdown
npm install --save-dev @pnotify/desktop
npm install --save-dev @pnotify/font-awesome4
npm install --save-dev @pnotify/font-awesome5-fix
npm install --save-dev @pnotify/font-awesome5
npm install --save-dev @pnotify/glyphicon
npm install --save-dev @pnotify/mobile
npm install --save-dev @pnotify/paginate

# ...

# Or, you can install this to get them all.
npm install --save-dev pnotify

Documentation for Old Versions

Readme for v4 on the v4 branch.
Readme for v3 on the v3 branch.

Migrating from PNotify 4

Installation

In addition to the JS and CSS, be sure to include a PNotify style.

Svelte

PNotify in Svelte.

import { alert, defaultModules } from '@pnotify/core';
import * as PNotifyMobile from '@pnotify/mobile';

defaultModules.set(PNotifyMobile, {});

alert({
  text: 'Notice me, senpai!',
});

React

PNotify in React.

import { alert, defaultModules } from '@pnotify/core';
import '@pnotify/core/dist/PNotify.css';
import * as PNotifyMobile from '@pnotify/mobile';
import '@pnotify/mobile/dist/PNotifyMobile.css';

defaultModules.set(PNotifyMobile, {});

alert({
  text: 'Notice me, senpai!',
});

Angular

PNotify in Angular.

import { alert, defaultModules } from '@pnotify/core';
import '@pnotify/core/dist/PNotify.css';
import * as PNotifyMobile from '@pnotify/mobile';
import '@pnotify/mobile/dist/PNotifyMobile.css';

defaultModules.set(PNotifyMobile, {});

//...
export class WhateverComponent {
  constructor() {
    alert({
      text: 'Notice me, senpai!',
    });
  }
}

<small>For IE support, see this issue.</small>

Angular (Injectable)

PNotify in Angular (Injectable)

// pnotify.service.ts
import { Injectable } from '@angular/core';
import { alert, defaultModules } from '@pnotify/core';
import '@pnotify/core/dist/PNotify.css';
import * as PNotifyMobile from '@pnotify/mobile';
import '@pnotify/mobile/dist/PNotifyMobile.css';

defaultModules.set(PNotifyMobile, {});

@Injectable()
export class PNotifyService {
  getPNotifyAlert() {
    return alert;
  }
}

// whatever.module.ts
//...
import { PNotifyService } from './pnotify.service';
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [PNotifyService],
  bootstrap: [...]
})
export class WhateverModule {}

// whatever.component.ts
import { PNotifyService } from './pnotify.service';
//...
export class WhateverComponent {
  alert = undefined;
  constructor(pnotifyService: PNotifyService) {
    this.alert = pnotifyService.getPNotifyAlert();
    this.alert({
      text: 'Notice me, senpai!'
    });
  }
}

AngularJS

PNotify in AngularJS.

<link
  href="node_modules/@pnotify/core/dist/PNotify.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="node_modules/@pnotify/mobile/dist/PNotifyMobile.css"
  rel="stylesheet"
  type="text/css"
/>

var angular = require('angular');
var PNotify = require('@pnotify/core');
var PNotifyMobile = require('@pnotify/mobile');

PNotify.defaultModules.set(PNotifyMobile, {});

angular
  .module('WhateverModule', [])
  .value('PNotify', PNotify)
  .controller('WhateverController', [
    'PNotify',
    function (PNotify) {
      PNotify.alert({
        text: 'Notice me, senpai!',
      });
    },
  ]);

Vanilla JS (ES5)

PNotify in vanilla ES5

<script
  type="text/javascript"
  src="node_modules/@pnotify/core/dist/PNotify.js"
></script>
<link
  href="node_modules/@pnotify/core/dist/PNotify.css"
  rel="stylesheet"
  type="text/css"
/>
<script
  type="text/javascript"
  src="node_modules/@pnotify/mobile/dist/PNotifyMobile.js"
></script>
<link
  href="node_modules/@pnotify/mobile/dist/PNotifyMobile.css"
  rel="stylesheet"
  type="text/css"
/>
<script type="text/javascript">
  PNotify.defaultModules.set(PNotifyMobile, {});

  PNotify.alert({
    text: 'Notice me, senpai!',
  });
</script>

Vanilla JS (ES6)

PNotify in vanilla ES6+

<link
  href="node_modules/@pnotify/core/dist/PNotify.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="node_modules/@pnotify/mobile/dist/PNotifyMobile.css"
  rel="stylesheet"
  type="text/css"
/>
<script type="module">
  import {
    alert,
    defaultModules,
  } from 'node_modules/@pnotify/core/dist/PNotify.js';
  import * as PNotifyMobile from 'node_modules/@pnotify/mobile/dist/PNotifyMobile.js';

  defaultModules.set(PNotifyMobile, {});

  alert({
    text: 'Notice me, senpai!',
  });
</script>

Styles

Bright Theme

The default theme, Bright Theme. Supports dark mode. Include the CSS file in your page:

<link
  href="node_modules/@pnotify/core/dist/BrightTheme.css"
  rel="stylesheet"
  type="text/css"
/>

Or if you're using a packager that imports CSS:

import '@pnotify/core/dist/BrightTheme.css';

Material

The Material theme. Supports dark mode. Requires material-design-icons and optionally the Roboto font. Include the CSS file in your page:

<link
  href="node_modules/@pnotify/core/dist/Material.css"
  rel="stylesheet"
  type

Pnotify

Install / Use

README