react-browser-notifications

React component for the Javascript Notifications API. The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. This component is supported in modern web browsers such as Chrome, Safari, Firefox, Opera, and Edge.

Demo

Live Demo

Installation

Using npm:
``


npm install --save react-browser-notifications



Usage

javascript
import React from 'react';
import ReactNotifications from 'react-browser-notifications';
class Example extends React.Component {
  constructor() {
    super();
    this.showNotifications = this.showNotifications.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  showNotifications() {
    // If the Notifications API is supported by the browser
    // then show the notification
    if(this.n.supported()) this.n.show();
  }
  handleClick(event) {
    // Do something here such as
    // console.log("Notification Clicked") OR
    // window.focus() OR
    // window.open("http://www.google.com")
    // Lastly, Close the notification
    this.n.close(event.target.tag);
  }
  render() {
    return (
      
                  onRef={ref => (this.n = ref)} // Required
          title="Hey There!" // Required
          body="This is the body"
          icon="icon.png"
          tag="abcdef"
          timeout="2000"
          onClick={event => this.handleClick(event)}
        />
        
      

    )
  }
}



Methods

Once you have the reference of

ReactNotifications by including the onRef={ref => (this.n = ref)} prop, you can call the below methods

`javascript // Returns true if the Notifications API is supported by the browser this.n.supported()

// Triggers the browser notification this.n.show()

// Close the notification, which is ID'ed by the tag prop this.n.close(tag)`

`Properties`

The

ReactNotifications component accepts the following props

Name | Type | Req/Opt | Description --- | --- | --- | ---onRef | function | Required | This is required to reference the ReactNotifications component. Recommended: onRef={ref => (this.n = ref)}, where n is any variable nametitle| string | Required | Title of the notificationbody| string | Optional | Text to display in the body of the notificationicon| string | Optional | Link to image to be displayed as the icontag| string | Optional | Unique identifier for the notification. If this is not provided as a prop, an unique shortid is automatically generated for the notificationtimeout| string | Optional | Indicates, in milliseconds, the duration for which the notification will remain displayed, if less than the default timeout. Default timeout is dependent on the browser (typically 4s or 5s). Maximum duration is the default timeoutinteraction | boolean | Optional | Only available in Chrome. Setting this to true makes the notification remain displayed until the user interacts with the notification (clicks the Close button). timeout overrides interactionif both props are providedonClick` | function | Optional | Fired when the notification is clicked

Browser Support

For up-to-date details on browser compatibility, please visit caniuse

License

MIT

Credits

Dependency: Push.js by Nickersoft

Installation

npm

npm install --save react-browser-notifications

Usage

javascript
import React from 'react';
import ReactNotifications from 'react-browser-notifications';

class Example extends React.Component {
constructor() {
super();
this.showNotifications = this.showNotifications.bind(this);
this.handleClick = this.handleClick.bind(this);
}

showNotifications() {
// If the Notifications API is supported by the browser
// then show the notification
if(this.n.supported()) this.n.show();
}

handleClick(event) {
// Do something here such as
// console.log("Notification Clicked") OR
// window.focus() OR
// window.open("http://www.google.com")

// Lastly, Close the notification
this.n.close(event.target.tag);
}

render() {
return (

onRef={ref => (this.n = ref)} // Required
title="Hey There!" // Required
body="This is the body"
icon="icon.png"
tag="abcdef"
timeout="2000"
onClick={event => this.handleClick(event)}
/>

)
}
}

Methods

Once you have the reference of

by including the

prop, you can call the below methods

javascript
// Returns true if the Notifications API is supported by the browser
this.n.supported()

// Triggers the browser notification
this.n.show()

// Close the notification, which is ID'ed by the tag prop
this.n.close(tag)

Properties

The

component accepts the following props

Name  | Type | Req/Opt | Description
--- | --- | --- | ---

onRef | function | Required | This is required to reference the ReactNotifications component. Recommended: onRef={ref => (this.n = ref)}

, where n is any variable name

title

 | string | Required | Title of the notification

body

 | string | Optional | Text to display in the body of the notification

icon

 | string | Optional | Link to image to be displayed as the icon

tag

 | string | Optional | Unique identifier for the notification. If this is not provided as a prop, an unique shortid is automatically generated for the notification

timeout

 | string | Optional | Indicates, in milliseconds, the duration for which the notification will remain displayed, if less than the default timeout. Default timeout is dependent on the browser (typically 4s or 5s). Maximum duration is the default timeout

interaction | boolean | Optional | Only available in Chrome. Setting this to true makes the notification remain displayed until the user interacts with the notification (clicks the Close button). timeout overrides interaction

 if both props are provided

onClick` | function | Optional | Fired when the notification is clicked