boundless-utils-web-notification

1.1.0 • Public • Published

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';
 
export default class NotifyDemo extends PureComponent {
    state = {
        n: 0,
    }
 
    spawnNotification = () => {
        notify(this.template(this.state.n + 1)).catch((error) => console.warn(error));
 
        this.setState({ n: this.state.n + 1 });
    }
 
    template(index) {
        return {
            header: `Notification #${index}`,
            body: 'I can support up to two lines of text.',
            icon: 'http://icons.iconarchive.com/icons/icons8/ios7/128/Astrology-Winter-icon.png',
            onClick: () => window.open('http://www.epa.gov/'),
        };
    }
 
    render() {
        return (
            <div>
                <Button ref='trigger' onClick={this.spawnNotification}>
                    Spawn Notification
                </Button>
            </div>
        );
    }
}

Dependents (0)

Package Sidebar

Install

npm i boundless-utils-web-notification

Weekly Downloads

1

Version

1.1.0

License

MIT

Last publish

Collaborators

  • sighrobot