React component with HTML5 Web Notification API. This component show nothing in dom element, but trigger HTML5 Web Notification API with render method in the life cycle of React.js.

View Demo

npm install --save react-web-notification

React component which wrap web-notification.

Notification.propTypes = {
  ignore: bool,
  disableActiveWindow: bool,
  notSupported: func,
  onPermissionGranted: func,
  onPermissionDenied: func,
  onShow: func,
  onClick: func,
  onClose: func,
  onError: func,
  timeout: number,
  title: string.isRequired,
  options: 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 on componentDidMount, 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.(Default 5000)

• title : Notification title.

• options : Notification options. set body, tag, icon here. See also (https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification)

See example

npm install
npm run start:example

npm test

• Notification.sound Notification.sound is not supported in any browser. You can emulate it with onShow callback. see example.