# use-toast-notification

> Customizable react notification toast hook

Latest version **0.1.3** (published 2022-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-toast-notification
pnpm add use-toast-notification
yarn add use-toast-notification
bun add use-toast-notification
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-10-05 |
| First published | 2022-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 59.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Itunu Lamina |
| Maintainers | i.thelamina |
| Keywords | react, components, ui, notification, toast |

## Links

- npm: https://www.npmjs.com/package/use-toast-notification
- Repository: https://github.com/thelamina/use-toast-notification
- Homepage: https://github.com/thelamina/use-toast-notification#readme
- Issues: https://github.com/thelamina/use-toast-notification/issues
- npm.io page: https://npm.io/package/use-toast-notification

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [use-toast-notification](https://npm.io/package/use-toast-notification.md) ^0.1.1

## 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

- 0.1.3 (latest) — 2022-10-05
- 0.1.2 — 2022-10-04
- 0.1.1 — 2022-10-02
- 0.1.0 — 2022-10-02

## README

# 📦 use-toast-notification

React hooks library to display notification toast.

[![NPM](https://img.shields.io/npm/v/use-toast-notification.svg)](https://www.npmjs.com/package/use-toast-notification)
[![npm](https://img.shields.io/npm/dm/use-toast-notification.svg)](https://www.npmjs.com/package/use-toast-notification)

## Install

```sh
npm install use-toast-notification

# or

yarn add use-toast-notification
```

<br />


# Usage

## Simple Usage

```tsx
import React from 'react'
import NotificationProvider, { useNotification } from 'use-toast-notification'

const App = () => {
  const notification = useNotification()

  const handleSubmit = async (e) => {
    try {
        notification.show({
            message: 'Your delivery is on its way', 
            title: 'Delivery Status',
            variant: 'success'
        })
    } catch(e){
        notification.show({
            message: 'Your delivery could not be processed', 
            title: 'Delivery Status',
            variant: 'error'
        })
    }
  }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <input name='address'/>
            <button type='submit'>Submit</button>
        </form>
    </div>
  )
}


const Main = () =>{
    return (
        <NotificationProvider
			config={{
				position: 'top-right',
				isCloseable: false,
				showTitle: true,
				showIcon: true,
				duration: 5,
			}}
		>
            <App/>
        </NotificationProvider>
    )
}


export default Main
```


| Name          | Type      | Default            | Description                                                  |
| ------------- | --------- | ------------------ | ------------------------------------------------------------ |
| title         | String    | notify             | Title of the notification                                    |
| message       | ReactNode |                    | The body of the notification `required`                      |
| duration      | Number    | `config.duration`  | The duration in seconds                                      |

<br />

## ⚙️ Config

You can customize your notification toast 
>all configurations are optional

```tsx
import React from 'react'
import NotificationProvider from 'use-toast-notification'

const App = () => {
  ...
}

const Main = () =>{
    return (
        <NotificationProvider
			config={{
				position: 'center',
				showClose: true,
				showIcon: false,
				showTitle: true,
				duration: 30, 
			}}
            overrideStyles={{
				cardContainer: {
                    ...
                },
                ...
			}}
		>
            <App/>
        </NotificationProvider>
    )
}

export default Main
```

## Available Config Properties

| Name                  | Type          | Default     | Description                                                  |
| --------------------- | ------------- | ------------| -------------------------------------------------------------|
| position              | String        | 'top-right' | The position of the card                                     |
| duration              | Number        |      5      | The duration in seconds                                      |
| animationDuration     | Number        |     300     | The animation duration in milliseconds                       |
| isCloseable           | Boolean       | false       | Toggle close button                                          |
| showIcon              | Boolean       | true        | Toggle card heading icon                                     |
| showTitle             | Boolean       | true        | Toggle card heading (icon and title) button                  |
| closeIcon             | ReactNode     |             | Custom close icon                                            |
| successIcon           | ReactNode     |             | Custom success icon                                          |
| errorIcon             | ReactNode     |             | Custom error icon                                            |
| infoIcon              | ReactNode     |             | Custom info icon                                             |
| errorColor            | string        |  'red'      | color for the error variant if no custom Icon                |
| successColor          | string        |  'green'    | color for the success variant if no custom Icon              |
| infoColor             | string        |  'blue'     | color for the info variant if no custom Icon                 |


> position is one of `'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center' | 'center'`;

<br>

## Available overrideStyles Properties

| Name                  | Type             | Description                                                      |
| --------------------- | -----------------| -----------------------------------------------------------------|
| container             | CSSProperties    | The style for the wrapper for all notification boxes             |
| cardContainer         | CSSProperties    | The style for the container for a single notification box        |
| cardContent           | CSSProperties    | The style for the content for a single notification              |
| icon                  | CSSProperties    | The icon sizes                                                   |
| closeButton           | CSSProperties    | The close button style                                           |
| cardMessage           | CSSProperties    | The style for the message of the notification                    |
| cardIcon              | CSSProperties    | The style for the icons container                                |
| cardTitle             | CSSProperties    | The style for the title of the notification                      |
| animateIn             | CSSProperties    | The animation properties for displaying the notification         |
| animateOut            | CSSProperties    | The animation properties for removing the notification           |


## License

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

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