React-toastic

The library is designed for personal use. But if you install it I would be very pleased.

Preview

Installation

npm i react-toastic
yarn add react-toastic

Use

import {ToastContainer, toast} from 'react-toastic';

function App() {

    const example = () => toast("Your text");

    return (
        <div>
            <button onClick={example}>click me</button>
            <ToastContainer/>
        </div>
    );
}

//Toast calling options

toast("Your text")
toast.error("Your text")
toast.info("Your text")
toast.success("Your text")
toast.warning("Your text")

You can change the toast as you like, below is the full api table:

toast('Your text', {
    type: 'success',
    position: 'bottom-right',
    timeout: '8000',
    animateIcon: true,
    icon: <YourIcon/>,
    style: {
        toast: {
            background: '#98789',
            color: '#551515',
            boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.15)'
            //....
        },
        progress: {
            background: '#98789',
        },
        close: {
            background: '#98789'
        }
    }
    //...
});

Configure the default settings for all toast messages by passing the ToastContainer config

// index.tsx
import {ToastContainer, ConfigToastType} from 'react-toastic';

const config: ConfigToastType = {
    position: 'bottom-center',
    timeout: '8000',
    pauseOnHover: true,
    style: {
        //theme
        light: {
            //type
            error: {
                toast: {
                    background: '#98789',
                    color: '#551515',
                    borderRadius: '12px'
                    //....
                }
            }
        }
    }
    //...
}

<ToastContainer config={config}/>

API

| Parameter | Type | Description | Default |
|----------------|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|---------------| | position | string | The toast position is set. Available options are 'top-right', 'top-left', 'top-center','bottom-right', 'bottom-left', 'bottom-center' | 'top-right' | | theme | string | The color theme of the toast is defined. Available options are 'light', 'dark', 'colored' | 'light' | | type | string | Available options are 'info', 'success', 'warning', 'error' | 'default' | | transition | boolean | Determines which animation will be used.Available options are 'skew' , 'zoom' , 'slide' , 'drop' | 'slide' | | title | string | The header for toast is set. | false |
| timeout | number undefined | Define toast time. If you specify 0 or undefined, toast will close only on click and also no progress bar will appear | 5000 | | icon | JSX.Element | Ability to insert your own icon | undefined | | hiddenIcon | boolean | hides the icon | false | | animateIcon | boolean | Adds animation to icons. Works only with native icons | false | | closeOnClick | boolean | Closes toast on click | false | | pauseOnHover | boolean | Stops progress animation when hovering | false | | style | ------ | Consider below | undefined |

Let's look at style separately

//Structure

type StyleT = {
    toast?: CSSProperties;
    close?: {
        background: CSSProperties.background;
    };
    progress?: CSSProperties;
}

If you want to change the styles for each theme and each type in config, you need:

//Structure

type ConfigStyleT = {
    light?: {
        info?: StyleT; 
        success?: StyleT; 
        warning?: StyleT; 
        error?: StyleT; 
        default?: StyleT
    },
    dark?: {},
    colored?: {}
}

Thank you so much for using the library ❤️. If you have any suggestions or comments ✉️, I'm always willing to work on them

This project has an MIT License.