Next Perpendicular Moonlanding

    react-web-notification

    0.8.0 • Public • Published

    React-web-notification Build Status npm version codebeat badge FOSSA Status codecov

    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.

    Demo

    View Demo

    Installation

    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 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. Ignored if 0 or less. (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)

    • swRegistration : ServiceWorkerRegistration. Use this prop to delegate the notification creation to a service worker. See also (https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification) ⚠️ onShow, onClick, onClose and onError handlers won't work when notification is created by the service worker.

    Usage example

    See example

    yarn
    yarn run start:example

    Tests

    yarn test

    Update dependencies

    Use npm-check-updates

    Known Issues

    License

    FOSSA Status

    Install

    npm i react-web-notification

    DownloadsWeekly Downloads

    7,603

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    30 kB

    Total Files

    14

    Last publish

    Collaborators

    • georgeosddev