📦 use-toast-notification

React hooks library to display notification toast.


Install

``sh
npm install use-toast-notification

or

yarn add use-toast-notification
`

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 (



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 |

⚙️ 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 (
config={{
position: 'center',
showClose: true,
showIcon: false,
showTitle: true,
duration: 30,
}}
overrideStyles={{
cardContainer: {
...
},
...
}}
>


)
}

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'`;

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