# jpylisela-react-pnotify

Latest version **0.0.19** (published 2021-08-23) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install jpylisela-react-pnotify
pnpm add jpylisela-react-pnotify
yarn add jpylisela-react-pnotify
bun add jpylisela-react-pnotify
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2021-08-23 |
| First published | 2019-11-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 38 |
| Unpacked size | 86.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Zak Huber |
| Maintainers | jpylisela |
| Keywords | notification, notifications, pnotify, react |

## Links

- npm: https://www.npmjs.com/package/jpylisela-react-pnotify
- Repository: https://github.com/jpylisela/react-pnotify
- Homepage: https://github.com/jpylisela/react-pnotify#readme
- Issues: https://github.com/jpylisela/react-pnotify/issues
- npm.io page: https://npm.io/package/jpylisela-react-pnotify

## Dependencies (38)

- [jest](https://npm.io/package/jest.md) 20.0.4 - 26
- [chalk](https://npm.io/package/chalk.md) ^1.1.3
- [react](https://npm.io/package/react.md) ^15.6.1
- [dotenv](https://npm.io/package/dotenv.md) ^4.0.0
- [eslint](https://npm.io/package/eslint.md) 4.4.1 - 5
- [pnotify](https://npm.io/package/pnotify.md) ^3.2.1
- [promise](https://npm.io/package/promise.md) ^8.0.1
- [webpack](https://npm.io/package/webpack.md) 3.5.1 - 5
- [fs-extra](https://npm.io/package/fs-extra.md) ^3.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.1
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.3
- [babel-jest](https://npm.io/package/babel-jest.md) ^20.0.3
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.4
- [url-loader](https://npm.io/package/url-loader.md) ^0.5.9
- [file-loader](https://npm.io/package/file-loader.md) ^0.11.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^7.1.2
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^7.2.3
- [babel-loader](https://npm.io/package/babel-loader.md) 7.1.1 - 8.0.5
- [style-loader](https://npm.io/package/style-loader.md) ^0.18.2
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^2.0.3
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) ^1.9.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.0.6
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^4.0.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2.7.1 - 3
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.1.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.29.0
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.7.0
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^9.1.2
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) ^2.35.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^5.1.1
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) ^3.2.0
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^2.0.0
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) ^1.2.1
- [sw-precache-webpack-plugin](https://npm.io/package/sw-precache-webpack-plugin.md) ^0.11.4
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^3.0.0
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) ^2.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.19 (latest) — 2021-08-23
- 0.0.17 — 2021-08-18
- 0.0.16 — 2021-08-18
- 0.0.15 — 2021-08-18
- 0.0.14 — 2021-08-18
- 0.0.12 — 2019-11-07
- 0.0.11 — 2019-11-06
- 0.0.10 — 2019-11-06
- 0.0.9 — 2019-11-06
- 0.0.8 — 2019-11-06
- 0.0.7 — 2019-11-06
- 0.0.6 — 2019-11-06

## README

# PNotify for React [![npm version](https://badge.fury.io/js/react-pnotify.svg)](https://badge.fury.io/js/react-pnotify)

<img src="http://i.imgur.com/rWh04yhr.png" />

# Overview
Beautiful JavaScript notification component for React. Many options and settings, including desktop notifications, etc.

Fork of https://github.com/zhuber/react-pnotify, with less restrictive dependencies.

# Options
- Animation (animateIn, animateOut)
- Error, Success, Notices, or Information notification types
- Desktop notifications
- Non-blocking
- Title
- Message
- Shadows
- Delayed transitions

# Live PNotify demos and examples
https://sciactive.github.io/pnotify/

# Animation
In order to use animation, you will need to include the Animate.css library:
https://daneden.github.io/animate.css/

```
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
```

# Usage

```javascript
import { Notification } from 'react-pnotify';

class Demo extends React.Component {
  render() {
    return (

      <Notification
        type='notice'
        title='Notice example - Permanent'
        text='Helpful notice content goes here'
        delay={2000}
        shadow={false}
        hide={false}
        nonblock={true}
        desktop={true}
      />
      <Notification
        type='success'
        title='Success example'
        text='Success message goes here'
        animateIn='zoomInLeft'
        animateOut='zoomOutRight'
        delay={2000}
        shadow={false}
        hide={true}
        nonblock={false}
        desktop={false}
      />
      <Notification
        type='error'
        title='Error example'
        text='Error message goes here'
        animateIn='bounceInLeft'
        animateOut='bounceOutRight'
        delay={2500}
        shadow={true}
        hide={true}
        nonblock={false}
        desktop={false}
      />
      <Notification
        type='info'
        title='Info example'
        text='Information message goes here'
        animateIn='lightSpeedIn'
        animateOut='hinge'
        delay={3000}
        shadow={false}
        hide={true}
        nonblock={false}
        desktop={true}
      />
      <Notification
        type='info'
        title='Info example'
        text='Information message goes here'
        animateIn='flipInX'
        animateOut='flipOutY'
        delay={4000}
        shadow={true}
        hide={true}
        nonblock={false}
        desktop={false}
      />
    );
  }
}
```

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