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.

import webNotification from 'boundless-utils-web-notification';

webNotification({body: 'Some text to be displayed...'});

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.

Example Usage

import React from 'react';
import notify from '../index';
import Button from '../../boundless-button/index';

export default class NotifyDemo extends React.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>
        );
    }
}