@arashaltafi/react-toast
Version:
react toast library
26 lines (25 loc) • 1.56 kB
JavaScript
'use client';
import React, { useEffect, useState } from 'react';
import CloseSuccess from '../../assets/icons/CloseSuccess';
import CloseError from '../../assets/icons/CloseError';
var ToastComponent = function (props) {
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
var _b = useState(false), isHover = _b[0], setIsHover = _b[1];
useEffect(function () {
setIsVisible(true);
if (!isHover) {
var timer_1 = setTimeout(function () {
handleClose();
}, props.timeWait || 3000);
return function () { return clearTimeout(timer_1); };
}
}, [props.onClose, isHover]);
var handleClose = function () {
setIsVisible(false);
setTimeout(props.onClose, 1000);
};
return (React.createElement("div", { className: "main-toast\n ".concat(props.color == 'success' ? 'success-state' : 'error-state', "\n ").concat(isVisible ? '' : 'translate-x-999', "\n "), onMouseEnter: function () { return props.pauseOnHover && setIsHover(true); }, onMouseLeave: function () { return props.pauseOnHover && setIsHover(false); } },
React.createElement("h4", { className: "body-toast ".concat(props.color == 'success' ? 'text-success' : 'text-error') }, props.text),
React.createElement("div", { onClick: handleClose, className: 'cursor-pointer' }, props.color === 'success' ? React.createElement(CloseSuccess, null) : React.createElement(CloseError, null))));
};
export default ToastComponent;