# styled-notifications

> A simple JavaScript notifications library

Latest version **1.0.3** (published 2018-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install styled-notifications
pnpm add styled-notifications
yarn add styled-notifications
bun add styled-notifications
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-10-21 |
| First published | 2018-10-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 55.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Jamie Livingstone |
| Maintainers | cavebeavis |
| Keywords | notification, popup, alert, toast |

## Links

- npm: https://www.npmjs.com/package/styled-notifications
- Repository: https://github.com/JamieLivingstone/Notifications
- Homepage: https://github.com/JamieLivingstone/Notifications#readme
- Issues: https://github.com/JamieLivingstone/Notifications/issues
- npm.io page: https://npm.io/package/styled-notifications

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-10-21
- 1.0.2 — 2018-10-18
- 1.0.1 — 2018-10-15

## README

[![Build Status](https://travis-ci.org/JamieLivingstone/Notifications.svg?branch=master)](https://travis-ci.org/JamieLivingstone/Notifications)

# Notifications
**Notifications** is a Javascript library for notifications heavily inspired by toastr but does not require any dependencies such as jQuery.

Works on browsers: IE9+, Safari, Chrome, FireFox, opera, edge

## npm Installation
Do either
```
npm i styled-notifications
```
or add the following to your `package.json`:
```
"dependencies": {
  "styled-notifications": "^1.0.3"
},
```

## Installation
Download files from the dist folder and then:
1. Link to notifications.css `<link href="notifications.css" rel="stylesheet"/>`

2. Link to notifications.js `<script src="notifications.js"></script>`

## Usage
### Custom options
- closeOnClick <bool> - Close the notification dialog when a click is invoked.
- displayCloseButton <bool> - Display a close button in the top right hand corner of the notification.
- positionClass <string> - Set the position of the notification dialog. Accepted positions: ('nfc-top-right', 'nfc-bottom-right', 'nfc-bottom-left', 'nfc-top-left', 'nfc-top-middle', 'nfc-bottom-middle').
- onClick <function(event)> - Call a callback function when a click is invoked on a notification.
- showDuration <integer> - Milliseconds the notification should be visible (0 for a notification that will remain open until clicked)
- theme <string> - Set the position of the notification dialog. Accepted positions: ('success', 'info', 'warning', 'error', 'A custom className').
```
const defaultOptions = {
		closeOnClick: true,
		displayCloseButton: false,
		positionClass: 'nfc-top-right',
		onclick: false,
		showDuration: 3500,
		theme: 'success'
};
```

## Example

### Success notification
```
// Create a success notification instance
const successNotification = window.createNotification({
	theme: 'success',
	showDuration: 5000
});

// Invoke success notification
successNotification({
    message: 'Simple success notification'
});

// Use the same instance but pass a title
successNotification({
    title: 'Working',
    message: 'Simple success notification'
});
```

### Information notification
```
// Only running it once? Invoke immediately like this
window.createNotification({
    theme: 'success',
    showDuration: 5000
})({
    message: 'I have some information for you...'
});
```
const positionOptions
## Additional

### Polymer Lit-Element Implementation
See [styled-notifications-element](https://www.npmjs.com/package/styled-notifications-element)

### Todo
1. ~~Add to NPM~~
2. Improve documentation
3. Further device testing
4. Add contributor instructions

---
_Source: https://npm.io/package/styled-notifications · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._