<Toast />

1import React, { useEffect } from "react";
2import ReactDOM from "react-dom";
3import "./Styles/_toast.scss";
4
5export default function Toast({ children, ...props }) {
6    const { title, message, timeout, isOpen, callback } = props;
7
8    useEffect(() => {
9        if (isOpen) {
10            const timer = setTimeout(() => {
11                callback();
12            }, timeout);
13            return () => {
14                clearTimeout(timer);
15            };
16        }
17    }, []);
18
19    return ReactDOM.createPortal(
20        <div className={`Toast ${isOpen ? "active" : ""}`}>
21            <span className="Toast-Close" onMouseDown={callback}>
22                Close
23            </span>
24            <h2>{title}</h2>
25            <p>{message}</p>
26        </div>,
27        document.getElementById("portals")
28    );
29}
30
31Toast.defaultProps = {
32    title: "Title",
33    message: "Message",
34    timeout: 2000,
35    isOpen: false,
36    callback: () => { },
37};

1$small: 40em;
2
3.Toast {
4      display: none;
5      position: fixed;
6      z-index: 1000;
7      padding: 0.5rem;
8      left: 50%;
9      transform: translate(-50%, -50%);
10      bottom: 2%;
11      width: 350px;
12      border-radius: 5px;
13      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
14            rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
15      background-color: hsl(145, 100%, 39%);
16
17      &-Close {
18            position: absolute;
19            top: 0;
20            right: 5px;
21            cursor: pointer;
22            color: white;
23      }
24
25      &.active {
26            display: block;
27      }
28
29      @media only screen and (min-width: $small) {
30            width: 365px;
31            bottom: 0;
32      }
33}

1