View Source

webNotification

Trigger native toasts in supporting browsers.

Demo

Show Implementation

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>
        );
    }
}