react-sweet-notification

A Beautiful, Responsive , Lightweight ,Easy to use, Accessible (Wai-Aria) Replacement For React Notify Boxes Zero Dependencies

Install

npm install react-sweet-notification
# or, if using yarn
yarn add react-sweet-notification

Usage

import { NotifyProvider, toast, confirm ,dialog } from "react-sweet-notification";

export default function App() {
  const showSuccessToast = () => {
    toast("hi my friend it is a success toast", { status: "success" });
  };

  const showErrorToast = () => {
    toast("hi my friend it is a error toast", { status: "error" });
  };

  const showWarningToast = () => {
    toast("hi my friend it is a warning toast", { status: "warning" });
  };

  const showInfoToast = () => {
    toast("hi my friend it is a info toast", { status: "info" });
  };

  const showConfirm = () => {
    confirm("hi my friend it is a confirm", {
      content: ({ onClose }) => "confirm content",
      preConfirm: () =>
        new Promise((res) => {
          setTimeout(() => res(""), 4000);
        }),
    });
  };
  
  const showDialog = () => {
    dialog("hi my friend it is a simple dialog", {
      content: ({ onClose }) => "dialog content",
    });
  };
  return (
    <div>
      <NotifyProvider />
      <button onClick={showSuccessToast}>Success toast</button>
      <button onClick={showErrorToast}>error toast</button>
      <button onClick={showWarningToast}>warning toast</button>
      <button onClick={showInfoToast}>info toast</button>
      <button onClick={showConfirm}>show confirm</button>
      <button onClick={showDialog}>show dialog</button>
    </div>
  );
}

When using the next.js framework, enter like this

import dynamic from "next/dynamic";

const NotifyProvider = dynamic(
  () => import("react-sweet-notification").then((mod) => mod.NotifyProvider),
  {
    ssr: false,
  }
);

component in this way

License

Licensed under MIT