Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including codex-notifier with all npm packages installed. Try it out:

var codexNotifier = require("codex-notifier")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

codex-notifier v1.0.3

Simple notifications for your website

JavaScript Notifier

Lightweight notification module for websites

Instalation

Install via npm

Install package

npm install codex-notifier --save

Connect with Webpack

Require module in your application

var notifier = require('exports-loader?notifier!codex-notifier');

Import styles

@import url('~codex-notifier/notifier.css');

You will need exports-loader and css-loader.

Install directly

  1. Download notifier.js and notifier.css files
  2. Add them to your page

Add from CDN

Add script and stylesheets files from GitHub

<script src="https://cdn.rawgit.com/codex-team/js-notifier/master/notifier.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/codex-team/js-notifier/master/notifier.css">

Usage

Module has only one public method — show. You should pass there object with notification properties

General properties

  • message — notification message (can contains HTML)
  • type — type of notification: alert, confirm or prompt. Alert by default
  • style — just add 'cdx-notify--' + style class. We have some default styles: success and error
  • time — notification expire time in ms. Only for alert notifies expires (8s by default)

Confirm notifications properties

  • okText — text for confirmation button (Confirm by default)
  • cancelText — text for cancel button (Cancel by default)
  • okHandler — fires when Confirm button was pressed
  • cancelHandler — fires when Cancel button was pressed or notification was closed

Prompt notifications properties

  • okText — text for submit button (Ok by default)
  • okHandler — fires when submit button was pressed. Gets input's value as a parameter
  • cancelHandler — fires when notification was closed
  • placeholder — input placeholder
  • default — input default value
  • inputType — type of input (text by default)

Examples

notifier.show({
  message: 'Refresh the page'
})

Notify

notifier.show({
  message: 'Message was sent',
  style: 'success',
  time: 5000
})

Success

notifier.show({
  message: 'Sorry, server is busy now',
  style: 'error'
})

Error

notifier.show({
  message: 'Delete account?',
  type: 'confirm',
  okText: 'Yes',
  cancelText: 'Oh, wait',
  okHandler: account.delete
})

Confirm

notifier.show({
  message: 'Enter your email',
  type: 'prompt',
  okText: 'Enter',
  okHandler: checkEmail,
  inputType: 'email',
  placeholder: 'team@ifmo.su'
})

Prompt

Custom styles

You can easily customize notifications appearance. Read more about it here

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free