# next-alert

> The next-alert library allows for easy integration and management of notifications / alerts in your Next.js 13/14 application.

Latest version **1.0.3** (published 2023-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-alert
pnpm add next-alert
yarn add next-alert
bun add next-alert
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-12-28 |
| First published | 2023-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 43.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | TheLoloS |
| Maintainers | thelolos |
| Keywords | next, alert, next 13, nextjs, next 14, notification, toast, react, framer-motion, typescript |

## Links

- npm: https://www.npmjs.com/package/next-alert
- Repository: https://github.com/TheLoloS/next-alert
- Homepage: https://github.com/TheLoloS/next-alert#readme
- Issues: https://github.com/TheLoloS/next-alert/issues
- npm.io page: https://npm.io/package/next-alert

## 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) — 2023-12-28
- 1.0.2 — 2023-12-27
- 1.0.1 — 2023-12-27
- 1.0.0 — 2023-12-27
- 0.6.5 — 2023-12-27
- 0.6.4 — 2023-12-27
- 0.6.3 — 2023-12-27
- 0.6.2 — 2023-12-27
- 0.6.1 — 2023-12-26
- 0.6.0 — 2023-12-26
- 0.5.11 — 2023-12-26
- 0.5.9 — 2023-12-26
- 0.5.8 — 2023-12-26
- 0.5.7 — 2023-12-26
- 0.5.6 — 2023-12-26
- … 41 more at https://npm.io/package/next-alert/versions

## README

# 💌 next-alert 

The next-alert library allows for easy integration and management of notifications / alerts in your Next.js 13/14 application.

## Demo

![demo](https://github.com/TheLoloS/next-alert/assets/57485545/d22d9e5e-ce20-4d5f-b69f-a28b29b3f629)

[Go to Demo](https://next-alert-deom.vercel.app/)

## Installation

To install next-alert, use one of the following commands in your terminal:

```bash
npm install framer-motion next-alert
# or
yarn add framer-motion next-alert
```


*Why do you need to install Framer-motion? Because the next alert uses Framer-motion for animation and I don't want to add this dependency in the next alert because you may be using a different version of Framer-motion for animation in your project.*

## Usage
In main component you must use provider:

```js
import { AlertProvider } from "next-alert";

export default function Home() {
	return (
        <AlertProvider>
            <Components/>
        </AlertProvider>
    )
}
```
In component use like this:

```js
"use client";
import { useAlert } from "next-alert";
import { Alerts } from "next-alert";

const Component = () => {
	const { addAlert } = useAlert();

    const handleClick = () => {
        addAlert("Title","Description","Type", () => { function execute after alert gone (optional) });
    }
    return (
        <div>
            // this component is container for showing notifications 
            <Alerts
				position="top-right"
				direction="right"
				timer={3000}
				className="rounded-md relative z-50 !w-80"
			>
                <SVG | or else files/>
            </Alerts>
        </div>
    )
}
```


## Docs

| **Param** | **Options** | **Default** |
|------------|------------|------------|
|---------------| Alert component params |----------------------|
| position |  top-left, top-right, bottom-left, bottom-right, center-top, center-bottom |  top-right |
| direction | left, right, top, bottom| right |
| timer | number | 3000 |
| className | tailwind class | empty, you can change defaut styles by add ! |
|---------------| Alert hook params |----------------------|
|title|string|empty|
|description|string|empty|
|type|success, error, warning, info|empty|
|---------------| Alert Import Types |----------------------|
|AlertProps| interface AlertProps |
|AlertType| "success" \| "error" \| "warning" \| "info" |
|AlertDirection| "left" \| "right" \| "top" \| "bottom" |
|AlertPosition| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "center-top" \| "center-bottom" |


## Dependencies
```json
    "framer-motion": ">=10",
    "react": ">=16",
    "react-dom": ">=16",
    "tailwindcss": ">=3.0.0"
```

## 🥰 Author
TheLoloS


## License
Mit


**Note:** next-alert is actively being developed, so we recommend regularly checking for the latest versions and updating your application.

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