react-high-toast
Version:
A highly customizable toast notification system for React using portals
36 lines (35 loc) • 1.76 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var iconMap = {
success: '✅',
error: '❌',
warning: '⚠️',
info: 'ℹ️',
default: '💬',
};
var ToastComponent = function (_a) {
var toast = _a.toast, onRemove = _a.onRemove, style = _a.style;
var _b = react_1.default.useState(false), isExiting = _b[0], setIsExiting = _b[1];
react_1.default.useEffect(function () {
if (toast.duration === 0)
return;
var timer = setTimeout(function () {
setIsExiting(true);
setTimeout(function () { return onRemove(toast.id); }, 300);
}, toast.duration - 300);
return function () { return clearTimeout(timer); };
}, [toast.duration, toast.id, onRemove]);
var handleDismiss = function () {
setIsExiting(true);
setTimeout(function () { return onRemove(toast.id); }, 300);
};
return (react_1.default.createElement("div", { className: "toast ".concat(toast.type, " ").concat(isExiting ? 'exiting' : ''), style: style, onClick: handleDismiss }, toast.render ? (toast.render(toast)) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { className: "toast-icon" }, iconMap[toast.type]),
react_1.default.createElement("div", { className: "toast-content" }, toast.message),
react_1.default.createElement("button", { className: "toast-close", onClick: handleDismiss }, "\u00D7")))));
};
exports.default = ToastComponent;