<!---
THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-UTILS-WEB-NOTIFICATION/INDEX.JS INSTEAD.
-->
# webNotification

Trigger native toasts in supporting browsers.

> Support for web notifications is [available in all major desktop browsers](http://caniuse.com/#feat=notifications),
  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

```bash
npm i boundless-utils-web-notification --save
```

Then use it like:


```jsx
/** @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>
        );
    }
}
```