react-high-toast
Version:
A highly customizable toast notification system for React using portals
47 lines (46 loc) • 2.13 kB
JavaScript
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ToastComponent from './Toast';
var positionStyles = {
'top-left': { top: '1rem', left: '1rem' },
'top-center': { top: '1rem', left: '50%', transform: 'translateX(-50%)' },
'top-right': { top: '1rem', right: '1rem' },
'bottom-left': { bottom: '1rem', left: '1rem' },
'bottom-center': { bottom: '1rem', left: '50%', transform: 'translateX(-50%)' },
'bottom-right': { bottom: '1rem', right: '1rem' },
};
var ToastContainer = function (_a) {
var toasts = _a.toasts, removeToast = _a.removeToast;
var _b = useState(false), mounted = _b[0], setMounted = _b[1];
var _c = useState(null), portalElement = _c[0], setPortalElement = _c[1];
useEffect(function () {
var element = document.getElementById('toast-portal');
if (!element) {
element = document.createElement('div');
element.id = 'toast-portal';
document.body.appendChild(element);
}
setPortalElement(element);
setMounted(true);
return function () {
if (element && element.childNodes.length === 0) {
document.body.removeChild(element);
}
};
}, []);
if (!mounted || !portalElement)
return null;
var toastGroups = toasts.reduce(function (acc, toast) {
var position = toast.position || 'top-right';
if (!acc[position]) {
acc[position] = [];
}
acc[position].push(toast);
return acc;
}, {});
return ReactDOM.createPortal(React.createElement(React.Fragment, null, Object.entries(toastGroups).map(function (_a) {
var position = _a[0], group = _a[1];
return (React.createElement("div", { key: position, className: "toast-container ".concat(position), style: positionStyles[position] }, group.map(function (toast) { return (React.createElement(ToastComponent, { key: toast.id, toast: toast, onRemove: removeToast })); })));
})), portalElement);
};
export default ToastContainer;