pure-notify
javascript notify component without any dependencies such as jquery, react or angular
Install
first, install by npm
$ npm install --save pure-notify
then, add to your html file
<script src="/node_modules/pure-notify/dist/pure-notify.min.js"></script>
<link rel="stylesheet" href="/node_modules/pure-notify/dist/pure-notify.min.css" />
Usage
PureNotify.success('Success message!');
PureNotify.success({ title: 'Success message!' });
let errorNotify = PureNotify.error({
title: 'Success message',
content: 'More detail description',
timeout: 0
});
PureNotify.update(errorNotify, {
title: 'Title changed!'
content: 'content changed!'
});
PureNotify.close(errorNotify);
API
setDefaultOptions
PureNotify.setGlobalOptions({
transitionTime: 600,
timeout: 4000,
template: `<div class="pure-notify {type}"><div class="title">{title}</div><div class="content">{content}</div><div class="close"></div></div>`,
className: ''
});
success/error/warn/info
let notifyIntance = PureNotify.success/error/warn/info({
title: 'Title',
content: 'Content',
timeout: 4000,
template: '',
className: ''
});
update
PureNotify.update(notifyIntance, {
title: 'Title',
content: 'Content',
timeout: 4000,
template: '',
className: ''
});
notifyIntance
parameter is pure-notify instance return from PureNotify.success/error/warn/info
once update notify instance, previous timeout will be clean and apply new timeout
close
PureNotify.close(notifyInstance);
if notify's timeout is 0, it won't be auto closed, and need to use PureNotify.close
to close it manually.
Custom Theme
you can just use options.className
to add custom class to notify container dom. for example,
PureNotify.info({
title: 'Hello',
content: 'World',
className: 'custom-notify-container'
})
above code will generate bollow html:
<div class="pure-notify-container custom-notify-container">
<div class="pure-notify info">
<div class="title">Hello</div>
<div class="content">World</div>
<div class="close"></div>
</div>
</div>
then, you can use css to override it's theme.
moreover, you can use options.template
to use custom html structure. for example:
PureNotify.error({
title: 'Hello',
content: 'World',
template: '<div class="my-notify-{type}">{title}:{content}</div>',
className: 'custom-notify-container'
})
above code will generate bellow html:
<div class="pure-notify-container custom-notify-container">
<div class="my-notify-error">Hello:World</div>
</div>