React component for the Javascript Notification API
npm install react-browser-notifications
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 propsName | 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