diff --git a/src/toasts/useToastState.js b/src/toasts/useToastState.js index a6d16c5..4e6cd1f 100644 --- a/src/toasts/useToastState.js +++ b/src/toasts/useToastState.js @@ -34,18 +34,28 @@ export function useToastState({ unique, messageFormatter, customToasts, onClose const toastId = nextId; const _message = isFunction(messageFormatter) ? messageFormatter(message) : message; + const CHAR_THRESHOLD = 150; + const EXTENDED_CLOSE_TIME = 10000; + let finalAutoClose = autoClose; + let closeControl = !finalAutoClose; + + if (isNumber(autoClose) && autoClose === 5000 && _message?.length > CHAR_THRESHOLD) { + finalAutoClose = EXTENDED_CLOSE_TIME; + closeControl = true; + } + push(position, { id: toastId, message: _message, type, position, - closeControl: !autoClose, + closeControl, }); - if (isNumber(autoClose) && !isNaN(autoClose)) { + if (isNumber(finalAutoClose) && !isNaN(finalAutoClose)) { const timeoutId = setTimeout(() => { close(position, toastId); - }, autoClose); + }, finalAutoClose); timeoutRefs.current[toastId] = { timeoutId, position }; } diff --git a/src/toasts/useToasts.js b/src/toasts/useToasts.js index 3606d12..f722ee1 100644 --- a/src/toasts/useToasts.js +++ b/src/toasts/useToasts.js @@ -11,7 +11,7 @@ export function useToasts() { * @param {string} message * @param {object} options Configurations object * @param {string} options.type toast color based on bootstrap theme ('info' - default, 'success', 'danger', 'warning') - * @param {number} options.autoClose miliseconds to automatically close toast (default 5000) + * @param {number} options.autoClose miliseconds to automatically close toast (default 5000, automatically increased to 10000 if message > 150 characters) * @param {string} options.position toast position ('TOP_LEFT', 'TOP_RIGHT' - default, 'BOTTOM_LEFT', 'BOTTOM_RIGHT') * * @returns {func} a closeToast function to close the opened toast