Toast

import React from "react";
import Toast from 'funda-ui/Toast';
 
// component styles
import 'funda-ui/Toast/index.css';
 
export default () => {
 
    return (
        <>
          
        <Toast 
            direction="bottom-right" 
            autoCloseTime={3000} 
            data={[
                { title: "Toast one", message: "First..." },
                { title: "Toast two", message: "Source of radiant heat." },
                { title: "Toast three", message: "ok!" },
                { title: "Toast four", message: "Last item here..." }
            ]} 
            onClose={(e, currentIndex, displayedElements) => {
                console.log(e, currentIndex, displayedElements);
            }}
        />
 
          
        <Toast
            cascading={false}
            direction="top-center"
            schemeBody="align-items-center text-white border-0 p-2"
            closeBtnColor="#fff"
            autoCloseTime={5000}
            data={[
                { theme: 'dark', title: false, note: false, message: "First..." },
                { theme: 'success', title: false, note: false, message: "Source of radiant heat." },
                { theme: 'danger', title: false, note: false, message: "ok!" },
                { theme: 'warning', title: false, note: false, message: "Last item here..." }
            ]}
        />
    
                
        <Toast 
            direction="bottom-center" 
            autoCloseTime={false} data={[
                { title: false, note: "11 mins ago", message: <><div style={{fontSize:"14px"}}>This is <span style={{color:"orange"}}>orange</span> text <p>...</p></div></> }
            ]} 
        />	
 
 
        <Toast 
            direction="vertical-center" 
            schemeHeader="text-white bg-dark" 
            closeBtnColor="#fff"  
            data={[
                { title: false, note: "11 mins ago", message: <><div>Text here</div></> }
            ]} 
        />	
 
 
       <Toast 
            direction="bottom-center" 
            schemeBody="align-items-center text-white bg-dark border-0" 
            closeBtnColor="#fff" 
            data={[
                { title: false, note: false, message: <><div>Text Here</div></> }
            ]} 
        />
 
 
          
        </>
    );
}

import React, { useState, useRef } from "react";
import Toast from 'funda-ui/Toast';
 
// component styles
import 'funda-ui/Toast/index.css';
 
 
export default () => {
 
    const counter = useRef<any>({ num: 0 });
    const [toastData, setToastData] = useState<any[]>([]);
    
    function handleClick(e) {
        e.preventDefault();
        counter.current.num++;
        //
        setToastData((prevState) => [
            ...prevState,
            { title: false, note: false, message: <><div dangerouslySetInnerHTML={{__html: `No.${counter.current.num}: ${Date.now()}`}}></div></> }
        ]);
 
    }
 
    return (
        <>
 
            <a href="#" onClick={handleClick}>Click here to display Toast information dynamically</a>
            <Toast 
                cascading={false}
                autoCloseTime={3000} 
                direction="bottom-center" 
                schemeBody="align-items-center text-white bg-dark border-0" 
                closeBtnColor="#fff" 
                data={toastData} 
                async
                onClose={(e, currentIndex, displayedElements) => {
                    setToastData((prevState: any) => {
                        prevState.splice(displayedElements.length - 1, 1);
                        return prevState;
 
                    });
                    console.log(e, currentIndex, displayedElements);
 
                }}
                autoHideMultiple
            />
 
        </>
    )
}