Use Toast

Install

npm i @u-gummy/use-toast

Quick Start

import { ToastContextProvider } from "@ugly/use-toast";

export default function App({ children }: { children: React.ReactNode }) {
  return <ToastContextProvider>{children}</ToastContextProvider>;
}

import { useToast } from "@ugly/use-toast";

export default function UserRegisterPage() {
  return (
    <>
      <button onClick={() => error({ title: "error", message: "meaasge" })}>
        ERROR
      </button>

      <button onClick={() => success({ title: "success", message: "meaasge" })}>
        SUCCESS
      </button>

      <button onClick={() => warning({ title: "warning", message: "meaasge" })}>
        WARNING
      </button>

      <button onClick={() => info({ title: "info", message: "meaasge" })}>
        INFO
      </button>

      <button onClick={() => error("only error message")}>ERROR</button>
    </>
  );
}

Element

<div className="ugly-toast-wrapper">
  <div className="ugly-toast-item {{type}}">
    <div className="ugly-toast-text-box">
      <p className="ugly-toast-title">{title}</p>
      <p className="ugly-toast-message">{message}</p>
    </div>
    <button className="ugly-toast-close-button">X</button>
  </div>
</div>

Customizable Styling

.ugly-toast-item {
  position: relative;
  display: flex-center;
  justify-content: center;
  box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.06);
  background-color: #fff !important;
  padding: 8px 16px 8px 50px !important;
  border-left-width: 3px;
}
.ugly-toast-item::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
.ugly-toast-item.success {
  border-color: #00cc5e !important;
}
.ugly-toast-item.success::before {
  background-image: url("/icons/icon-success.svg");
}
.ugly-toast-item.error {
  border-color: #f64141 !important;
}
.ugly-toast-item.error::before {
  background-image: url("/icons/icon-error.svg");
}
.ugly-toast-item.info {
  border-color: #178dff !important;
}
.ugly-toast-item.info::before {
  background-image: url("/icons/icon-info.svg");
}
.ugly-toast-item.warning {
  border-color: #ffa00a !important;
}
.ugly-toast-item.warning::before {
  background-image: url("/icons/icon-warning.svg");
}

.ugly-toast-title {
  color: #676c6f;
  font-weight: 700;
  font-size: 14px;
}
.ugly-toast-message {
  color: #adadad;
  font-size: 12px;
}

.ugly-toast-close-button {
  font-size: 0;
  width: 20px;
  height: 20px;
  background: url("/icons/icon-close-gray.svg");
}