react-high-toast
Version:
A highly customizable toast notification system for React using portals
31 lines (30 loc) • 1.43 kB
JavaScript
import React from '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.useState(false), isExiting = _b[0], setIsExiting = _b[1];
React.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.createElement("div", { className: "toast ".concat(toast.type, " ").concat(isExiting ? 'exiting' : ''), style: style, onClick: handleDismiss }, toast.render ? (toast.render(toast)) : (React.createElement(React.Fragment, null,
React.createElement("span", { className: "toast-icon" }, iconMap[toast.type]),
React.createElement("div", { className: "toast-content" }, toast.message),
React.createElement("button", { className: "toast-close", onClick: handleDismiss }, "\u00D7")))));
};
export default ToastComponent;