Notification Service provides a simple show/hide message. It is based on CustomElements and may be integrated with any framework. Push notification works through CustomEvent dispatcher. Notification Service supports all popular browsers, including Internet Explorer 11, although some polyfills are required for IE 11. Please see here.
npm install notification-service-js
yarn add notification-service-js
// As a module
import 'notification-service-js'
// As a <script> tag
<script src="node_modules/notification-service-js/build/notification-service.js"></script>
// Insert web component into the DOM
<notification-service></notification-service>
CustomEvent.DISPATCH('WEB_COMP_SHOW_NOTIFICATION', {
type: 'success', // success, error, warning
message: 'Your message has been sent',
timer: 3000 // default 5000, not required
})
CustomEvent.DISPATCH('EVENT_NAME', options)
Type: string
Values: success, error, warning
A class which will be added to the notification content .web-nc-content.<type>
. Depends on the class CSS styles will be applied to the content. You can add your own type and add styles through the prop cross-img-src
.
Type: string
Content which will be displayed inside notification.
Type: number
Default: 5000
Time in milliseconds how long notification will be showing.
The path to an image (png/svg/jpg) file, which will be used for a cross icon.
<notification-service cross-img-src="../images/cross.svg"></notification-service>
The path to .css file, which will be pasted after common styles.
<notification-service style-src="build/style.css"></notification-service>
Any contributions you make are greatly appreciated.
Please read the Contributions Guidelines before submitting a PR.
MIT © Vasyl Stokolosa