📦 use-toast-notification

React hooks library to display notification toast.

Install

npm install use-toast-notification

# or

yarn add use-toast-notification

Usage

Simple Usage

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 |

⚙️ Config

You can customize your notification toast

all configurations are optional

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

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