https://github.com/jasonraimondi/use-notify-rxjs
Dismissable toast notifications powered by rxjs.
https://github.com/jasonraimondi/use-notify-rxjs
hooks notifications react rxjs toasts use-notifications use-notify
Last synced: 3 months ago
JSON representation
Dismissable toast notifications powered by rxjs.
- Host: GitHub
- URL: https://github.com/jasonraimondi/use-notify-rxjs
- Owner: jasonraimondi
- License: mit
- Created: 2021-02-15T06:27:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-02T01:48:36.000Z (about 5 years ago)
- Last Synced: 2025-02-23T10:25:47.667Z (over 1 year ago)
- Topics: hooks, notifications, react, rxjs, toasts, use-notifications, use-notify
- Language: TypeScript
- Homepage:
- Size: 3.75 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `useNotify`
[](https://github.com/jasonraimondi/use-notify-rxjs)
Simple, design-free toast notifications with a single peer dependency: `rxjs`.
## Installation
```bash
npm install --save use-notify-rxjs
```
## Usage
```jsx
import { useNotify } from 'use-notify-rxjs';
function Demo() {
const notify = useNotify();
return (
<>
notify.success({ message: "This is a success notification", title: "Congrats!", ttl: 2000 })}>Add Success
notify.info({ message: "This is an info notification", ttl: 10000 })}>Add Info
notify.error("This is an error notification")}>Add Error
-
{note.message}
clear(note.id)}>×
{notify.notifications.map(note =>
)}
>
);
}
```
```jsx
function App() {
return
;
}
ReactDOM.render(, document.getElementById("root"));
```
## Reference
```ts
const { notifications, success, info, error, clear } = useNotify();
```
- **`notifications`**_`: Notify[]`_ - list of notifications
- **`success`**_`: (message: string | NofityMessage) => void`_ - send success alert
- **`info`**_`: (message: string | NofityMessage) => void`_ - send info alert
- **`error`**_`: (message: string | NofityMessage) => void`_ - send error alert
- **`clear`**_`: (id?: number) => void`_ - clear single or all alerts
```ts
type Notify = {
id: number;
message: string;
title?: string;
type: NotifyType;
isSuccess: boolean;
isInfo: boolean;
isError: boolean;
ttl: number;
}
type NotifyMessage = {
message: string;
title?: string;
ttl?: number; // override global ttl for individual message
}
enum NotifyType {
Error = "error",
Info = "info",
Success = "success",
}
```
Provider Options:
```jsx
```
- **`ttl`**_`: number (optional, default: 4500)`_ - number of ms the notification should be kept alive
- **`supressDuplicates`**_`: boolean (optional, default: false)`_ - supress duplicate notifications by tracking notify history