React component with HTML5 Web Notification API.
This component show nothing in dom element, but trigger HTML5 Web Notification API with
React component which wrap web-notification.
render
method in the life cycle of React.js.Demo
View DemoInstallation
npm install --save react-web-notification
API
Notification
React component which wrap web-notification.Props
Notification.propTypes = {
ignore: bool,
disableActiveWindow: bool,
askAgain: bool,
notSupported: func,
onPermissionGranted: func,
onPermissionDenied: func,
onShow: func,
onClick: func,
onClose: func,
onError: func,
timeout: number,
title: string.isRequired,
options: object,
swRegistration: object,
};
ignore
: if true, nothing will be happen
disableActiveWindow
: if true, nothing will be happen when window is active
askAgain
: if true,window.Notification.requestPermission
will be called oncomponentDidMount
, even if it was denied before,
notSupported()
: Called when HTML5 Web Notification API is not supported.
onPermissionGranted()
: Called when permission granted.
onPermissionDenied()
: Called when permission denied.Notification
will do nothing until permission granted again.
onShow(e, tag)
: Called when Desktop notification is shown.
onClick(e, tag)
: Called when Desktop notification is clicked.
onClose(e, tag)
: Called when Desktop notification is closed.
onError(e, tag)
: Called when Desktop notification happen error.
timeout
: milli sec to close notification automatically. Ignored if0
or less. (Default5000
)
title
: Notification title.
options
: Notification options. setbody
,tag
,icon
here.
swRegistration
: ServiceWorkerRegistration. Use this prop to delegate the notification creation to a service worker.
onShow
, onClick
, onClose
and onError
handlers won't work when notification is created by the service worker.Usage example
See exampleyarn
yarn run start:example
Tests
yarn test
Update dependencies
Use npm-check-updatesKnown Issues
Notification.soundNotification.sound
is not supported in any browser.
You can emulate it with onShow
callback. see example.