react-toastic v1.0.3

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

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.