Package Exports

react-sweet-notification
react-sweet-notification/dist/index.js
react-sweet-notification/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-sweet-notification) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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