Notwithstanding Previous Misdemeanors

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

    Install

    npm i boundless-utils-web-notification

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • sighrobot