[ ReactJs ] Toast Message popup display ( https://codesandbox.io/s/toastmessage-vvmwp )

App.js

import React from "react";
import Toast from "./Toast";
import "./Toast.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      level: "success",
      message: null
    };
  }

  render() {
    return (
      <form onSubmit={this.showToast.bind(this)}>
        <select onChange={this.onLevelChange.bind(this)} required>
          <option value="" defaultValue>
            Select level
          </option>
          <option value="success">Success</option>
          <option value="warning">Warning</option>
          <option value="danger">Danger</option>
        </select>

        <input
          onChange={this.onMessageChange.bind(this)}
          placeholder="Enter message"
          required
        />

        <button type="submit">Show toast</button>

        <Toast
          level={this.state.level}
          message={this.state.message}
          visible={this.state.showToast}
        />
      </form>
    );
  }

  onLevelChange(e) {
    this.setState({
      level: e.target.value
    });
  }

  onMessageChange(e) {
    this.setState({
      message: e.target.value
    });
  }

  showToast(e) {
    e.preventDefault();
    this.setState(
      {
        showToast: true
      },
      () => {
        setTimeout(() => this.setState({ showToast: false }), 3000);
      }
    );
  }
}

export default App;

Toast.css

.toast {
  align-items: center;
  border-radius: 25px;
  bottom: 0px;
  display: flex;
  min-height: 50px;
  max-height: 50px;
  justify-content: space-between;
  left: 50%;
  padding: 0 20px;
  position: fixed;
  -webkit-transform: translateX(-50%) translateY(150%);
  transform: translateX(-50%) translateY(150%);
  transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
  transition: transform 0.35s ease, -webkit-transform 0.35s ease;
}

.toast.visible {
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.toast.success {
  background-color: #16a085;
}

.toast.success p {
  color: #fff;
}

.toast.danger {
  background-color: #c0392b;
}

.toast.danger p {
  color: #fff;
}

.toast.warning {
  background-color: #f38211;
}

.toast.warning p {
  color: #fff;
}

.toast figure {
  height: 35px;
  margin: 0 15px 0 0;
  opacity: 0.9;
  width: 35px;
}

.toast figure img {
  height: 100%;
  width: 100%;
}

.toast p {
  color: #fff;
  font-family: "Noto Sans";
  font-size: 14px;
  white-space: nowrap;
}

/* -------------- DEMO STYLES --------------------- */

body {
  display: flex;
  justify-content: center;
  padding: 50px;
}

select,
input {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #555;
  height: 35px;
  margin: 0 5px;
  padding: 0 12px;
}

button {
  background-color: #fff;
  border: 1px solid #8e44ad;
  border-radius: 2px;
  color: #8e44ad;
  height: 35px;
  margin: 0 5px;
  padding: 0 12px;
}

Toast.js

import React from "react";
import "./Toast.css";

class Toast extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  render() {
    let classes = `toast ${this.props.level} `;
    classes += this.state.visible ? "visible" : "";

    return (
      <div className={classes}>
        <figure>
          <img src={this.getIcon()} alt="Logo" />
        </figure>

        <p>{this.props.message}</p>
      </div>
    );
  }

  getIcon = () => {
    switch (this.props.level) {
      case "warning":
        return "http://svgshare.com/i/19x.svg";
      case "danger":
        return "http://svgshare.com/i/19E.svg";
      case "success":
        return "http://svgshare.com/i/19y.svg";
      default:
        return "no data found";
    }
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.visible !== prevState.visible) {
      return { visible: nextProps.visible };
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.visible !== prevState.visible) {
      this.setState({ visible: prevProps.visible });
    }
  }
}

export default Toast;