Customizable react notification toast hook
npm install use-toast-notificationReact hooks library to display notification toast.


``sh
npm install use-toast-notification
yarn add use-toast-notification
`
`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 (
const Main = () =>{
return (
position: 'top-right',
isCloseable: false,
showTitle: true,
showIcon: true,
duration: 5,
}}
>
)
}
export default Main
`
| Name | Type | Default | Description |
| ------------- | --------- | ------------------ | ------------------------------------------------------------ |
| title | String | notify | Title of the notification |
| message | ReactNode | | The body of the notification required |config.duration
| duration | Number | | The duration in seconds |
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 (
position: 'center',
showClose: true,
showIcon: false,
showTitle: true,
duration: 30,
}}
overrideStyles={{
cardContainer: {
...
},
...
}}
>
)
}
export default Main
`
| 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'`;
| 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 |
MIT © thelamina