Simple notifications for your website
npm install codex-notifierLightweight notification module for websites
Install package
``shell`
npm install codex-notifier --save
`shell`
yarn add codex-notifier
#### Require module
`javascript`
const notifier = require('codex-notifier');
`javascript`
import notifier from 'codex-notifier';
import {ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions} from 'codex-notifier';
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 defaultstyle
- — just add 'cdx-notify--' + style class. We have some default styles: success and errortime
- — 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 pressedcancelHandler
- — 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 parametercancelHandler
- — fires when notification was closedplaceholder
- — input placeholderdefault
- — input default valueinputType
- — type of input (text by default)
`javascript`
notifier.show({
message: 'Refresh the page'
})
`javascript`
notifier.show({
message: 'Message was sent',
style: 'success',
time: 5000
})
`javascript`
notifier.show({
message: 'Sorry, server is busy now',
style: 'error'
})
`javascript`
notifier.show({
message: 'Delete account?',
type: 'confirm',
okText: 'Yes',
cancelText: 'Oh, wait',
okHandler: account.delete
})
`javascript``
notifier.show({
message: 'Enter your email',
type: 'prompt',
okText: 'Enter',
okHandler: checkEmail,
inputType: 'email',
placeholder: 'team@ifmo.su'
})
You can easily customize notifications appearance. Read more about it here