# react-easy-notify

> A React Library For Notifications

Latest version **1.0.6** (published 2020-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-easy-notify
pnpm add react-easy-notify
yarn add react-easy-notify
bun add react-easy-notify
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-09-30 |
| First published | 2020-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 386.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | AlsiddigAhmed |
| Maintainers | alsiddigahmed |
| Keywords | react, notification, react-notify, react-easy-notify, notify, react-notification, toast, alert, react-alert |

## Links

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

## 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.6 (latest) — 2020-09-30
- 1.0.5 — 2020-09-20
- 1.0.4 — 2020-09-13
- 1.0.3 — 2020-09-13

## README

# react-easy-notify

> A React Library For Notifications

[![NPM](https://img.shields.io/npm/v/react-easy-notify.svg)](https://www.npmjs.com/package/react-easy-notify) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Introduction

This is a notification library for making fast, easy to use and lightweight alert window. There are two types of notifications:

- alert window.
- confirmation window.

## Install

```bash
npm install --save react-easy-notify
```

## Demo

[see demo https://react-easy-notify.netlify.app](https://react-easy-notify.netlify.app)

## Usage

## Sweat Notify is Here

you can now use a new theme of [react-easy-notify](https://react-easy-notify.netlify.app). SweatNotify is a lightweight fast and easy to use for simple notifications.

## Code Snippet

```jsx
import React from 'react'
import { ReactEasyNotify, sweatNotify } from 'react-easy-notify'
import 'react-easy-notify/dist/index.css'

const onClick = () => {
  sweatNotify({
    message:
      "hello world's alert, here is my sweat one for you , it's awesome, isn't it?"
  })
}

const App = () => {
  return (
    <div>
      <ReactEasyNotify />
      <button onClick={onClick}>sweat</button>
    </div>
  )
}
export default App
```

### How to use the notify

```jsx
import React from 'react'

import { ReactEasyNotify, notify } from 'react-easy-notify'
import 'react-easy-notify/dist/index.css'

const options = {
  type: 'success',
  title: 'success',
  status: true,
  timeout: 5000,
  message: 'hi there, here is my awesome alert message',
  position: 'top-right',
  animationType: 'pops-up'
}

const App = () => {
  return (
    <div>
      <button onClick={() => notify(options)}>click me</button>
      <EasyNotify />
    </div>
  )
}

export default App
```

### How to use the confirm

confirm provides a callback function, it can be used with cookies or similar things
here is an example

```jsx
import React from 'react'

import { ReactEasyNotify, confirm } from 'react-easy-notify'
import 'react-easy-notify/dist/index.css'

const options = {
  text: 'your message or text here',
  callback: function () {
    // will run after confirming
  }
}

const App = () => {
  return (
    <div>
      <button onClick={() => confirm(options)}>click me</button>
      <EasyNotify />
    </div>
  )
}

export default App
```

### Available Options

| Option          | Description                                                                                                                                                  | Example                                 |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
| `status`        | the status for running notification, if false the alert window will not appear                                                                               | <code>status: true</code>               |
| `type`          | the alert type, there are three types <code>success</code>, <code>warning</code>, <code>danger</code>                                                        | <code>type: "success"</code>            |
| `title`         | the alert title will appear in the header                                                                                                                    | <code>title: "Hi there"</code>          |
| `message`       | alert message will appear in the body, it can be of any language                                                                                             | <code>message: "success message"</code> |
| `timeout`       | the alert window duration by millisecond                                                                                                                     | <code>timeout: 500</code>               |
| `position`      | you can put the alert at many places in the browser window, the available options are <code>top-left</code>, <code>top-right</code>, <code>top-center</code> | <code>position: "top-right"</code>      |
| `animationType` | you can also choose an animation type you want from many available types                                                                                     | <code>animationType: pops-up</code>     |

## Position

| property        |
| --------------- |
| `top-left`      |
| `top-right`     |
| `top-center`    |
| `bottom-left`   |
| `bottom-right`  |
| `bottom-center` |

## AnimationType

| property      | description                           |
| ------------- | ------------------------------------- |
| `fade-in`     | fading alert window without animation |
| `pops-up`     | pop up animation                      |
| `slide-left`  | slide left alert window with fading   |
| `slide-right` | slide right alert window with fading  |
| `vibration`   | vibrating in the alert window         |

## License

MIT © [AlsiddigAhmed](https://github.com/AlsiddigAhmed)

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