webNotification
Trigger native toasts in supporting browsers.
Support for web notifications is available in all major desktop browsers, except IE (February 2017).
This module is not a React component, but a utility. The "close" functionality of web notifications was removed in a platform spec update, so it's no longer possible to have a true lifecycle.
The utility works by providing an object with the following properties:
-
body
String
up to two lines are displayed in the notification (based on the current browser implementations) -
header
String
the bolded title displayed at the top of the notification -
icon
HTMLString
(optional) the URL of a picture or icon to be displayed with the notification (looks best if square) -
onClick
Function
(optional) add arbitrary functionality when the notification is clicked
This will return a Promise
. Resolution means the notification was created correctly (returns the Notification
,
and rejection will return a relevant error description string.
Installation
npm i boundless-utils-web-notification --save
Then use it like:
/** @jsx createElement */ import createElement PureComponent from 'react';import notify from 'boundless-utils-web-notification';import Button from 'boundless-button'; state = n: 0 { ; this; } { return header: `Notification #` body: 'I can support up to two lines of text.' icon: 'http://icons.iconarchive.com/icons/icons8/ios7/128/Astrology-Winter-icon.png' window ; } { return <div> <Button ='trigger' => Spawn Notification </Button> </div> ; }