@zenithui/toast
Version:
A modern, lightweight toast notification system for React applications. ZenithUI Toast provides a simple and customizable way to display notifications, alerts, and messages to users with smooth animations and flexible styling options.
99 lines (98 loc) • 3.82 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__toast_js_20e14d7c__ from "./toast.js";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_toast_js_6c23576c__ from "../hooks/use-toast.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
import "../index.css";
const ToastContainer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.lazy)(()=>import("./toast-container/toast-container.js"));
function ToastProvider({ position = "bottom-right", animation = "fade", theme = "auto", duration = 5000, maxToasts = 5, X_Offset = 0, Y_Offset = 0, richColors = false, disableAutoDismiss = false, enableQueueSystem = false, showCloseButton = false, classNames, children }) {
const [toasts, setToasts] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
const [queue, setQueue] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
const hookTheme = (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.useTheme)();
const themeClass = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
if ("auto" === theme) return hookTheme;
return "dark" === theme ? "dark" : "";
}, [
theme,
hookTheme
]);
const addToast = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((message, type, options)=>{
const id = Math.random().toString(36).substring(2, 11);
const newToast = {
id,
type,
message,
remove: false,
options
};
setQueue((prev)=>enableQueueSystem ? [
...prev,
newToast
] : prev);
setToasts((prev)=>enableQueueSystem ? prev : [
...prev,
newToast
]);
}, [
enableQueueSystem
]);
const removeToast = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((id)=>{
setToasts((prev)=>prev.filter((toast)=>toast.id !== id));
}, []);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
if (enableQueueSystem && queue.length > 0 && toasts.length < maxToasts) {
setQueue((prev)=>prev.slice(1));
setToasts((prev)=>[
...prev,
queue[0]
]);
}
}, [
queue,
enableQueueSystem,
maxToasts,
toasts
]);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
(0, __WEBPACK_EXTERNAL_MODULE__toast_js_20e14d7c__.registerToast)(addToast);
}, [
addToast
]);
const contextValue = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
addToast,
removeToast,
setToasts,
richColors,
position,
animation,
showCloseButton,
disableAutoDismiss,
duration,
X_Offset,
Y_Offset,
classNames
}), [
addToast,
removeToast,
richColors,
position,
animation,
showCloseButton,
disableAutoDismiss,
duration,
X_Offset,
Y_Offset,
classNames
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__hooks_use_toast_js_6c23576c__.ToastContext.Provider, {
value: contextValue,
children: [
children,
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ToastContainer, {
toasts: toasts,
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(themeClass)
})
]
});
}
export { ToastProvider as default };