@nedomas/react-live-chat-loader
Version:
Implement live chat in your react app without taking a performance hit.
98 lines (96 loc) • 12.5 kB
JavaScript
import { useContext, useCallback, useEffect } from 'react';
import { LiveChatLoaderContext } from "../context";
import * as Providers from "../providers";
var requestIdleCallback = typeof window !== 'undefined' ? window.requestIdleCallback : null;
var connection = typeof window !== 'undefined' ?
// eslint-disable-next-line @typescript-eslint/no-explicit-any
window.navigator && window.navigator.connection : null;
var useChat = function useChat() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
loadWhenIdle: false
},
loadWhenIdle = _ref.loadWhenIdle;
var _useContext = useContext(LiveChatLoaderContext),
provider = _useContext.provider,
providerKey = _useContext.providerKey,
idlePeriod = _useContext.idlePeriod,
maxIdlePeriod = _useContext.maxIdlePeriod,
state = _useContext.state,
setState = _useContext.setState,
appID = _useContext.appID,
locale = _useContext.locale,
baseUrl = _useContext.baseUrl,
beforeInit = _useContext.beforeInit,
onReady = _useContext.onReady;
useEffect(function () {
// Don't load if idlePeriod is 0, null or undefined
if (typeof window === 'undefined' || !loadWhenIdle || !idlePeriod) return;
// Don't load if 2g connection or save-data is enabled
if (connection && (connection.saveData || /2g/.test(connection.effectiveType))) return;
if (isNaN(idlePeriod)) return;
// deadline.timeRemaining() has an upper limit of 50 milliseconds
// We want to ensure the page has been idle for a significant period of time
// Therefore we count consecutive maximum timeRemaining counts and load chat when we reach our threshold
var elapsedIdlePeriod = 0;
var previousTimeRemaining = 0;
var scheduleLoadChat = function scheduleLoadChat(deadline) {
if (elapsedIdlePeriod > idlePeriod) return loadChat({
open: false
});
var timeRemaining = deadline.timeRemaining();
// To ensure browser is idle, only accumalte elapsedIdlePeriod when
// two consecutive maximum timeRemaining's have been observed
if (previousTimeRemaining > 49 && timeRemaining > 49) elapsedIdlePeriod += timeRemaining;
previousTimeRemaining = timeRemaining;
requestIdleCallback === null || requestIdleCallback === void 0 || requestIdleCallback(scheduleLoadChat);
};
if (requestIdleCallback) {
requestIdleCallback(scheduleLoadChat);
setTimeout(function () {
return loadChat({
open: false
});
}, maxIdlePeriod);
} else {
setTimeout(function () {
return loadChat({
open: false
});
}, idlePeriod);
}
}, []);
var chatProvider = Providers[provider];
var loadChat = useCallback(function () {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
open: true
},
_ref2$open = _ref2.open,
open = _ref2$open === void 0 ? true : _ref2$open;
if (!providerKey) {
//eslint-disable-next-line no-console
console.error('No api key given to react-live-chat-loader');
return;
}
if (!provider) {
//eslint-disable-next-line no-console
console.error('No provider given to react-live-chat-loader');
return;
}
chatProvider.load({
providerKey: providerKey,
setState: setState,
appID: appID,
locale: locale,
baseUrl: baseUrl,
beforeInit: beforeInit,
onReady: onReady
});
if (open) {
chatProvider.open();
if (state !== 'complete') setState('open');
}
}, [state]);
return [state, loadChat];
};
export default useChat;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJ1c2VDb250ZXh0IiwidXNlQ2FsbGJhY2siLCJ1c2VFZmZlY3QiLCJMaXZlQ2hhdExvYWRlckNvbnRleHQiLCJQcm92aWRlcnMiLCJyZXF1ZXN0SWRsZUNhbGxiYWNrIiwid2luZG93IiwiY29ubmVjdGlvbiIsIm5hdmlnYXRvciIsInVzZUNoYXQiLCJfcmVmIiwiYXJndW1lbnRzIiwibGVuZ3RoIiwidW5kZWZpbmVkIiwibG9hZFdoZW5JZGxlIiwiX3VzZUNvbnRleHQiLCJwcm92aWRlciIsInByb3ZpZGVyS2V5IiwiaWRsZVBlcmlvZCIsIm1heElkbGVQZXJpb2QiLCJzdGF0ZSIsInNldFN0YXRlIiwiYXBwSUQiLCJsb2NhbGUiLCJiYXNlVXJsIiwiYmVmb3JlSW5pdCIsIm9uUmVhZHkiLCJzYXZlRGF0YSIsInRlc3QiLCJlZmZlY3RpdmVUeXBlIiwiaXNOYU4iLCJlbGFwc2VkSWRsZVBlcmlvZCIsInByZXZpb3VzVGltZVJlbWFpbmluZyIsInNjaGVkdWxlTG9hZENoYXQiLCJkZWFkbGluZSIsImxvYWRDaGF0Iiwib3BlbiIsInRpbWVSZW1haW5pbmciLCJzZXRUaW1lb3V0IiwiY2hhdFByb3ZpZGVyIiwiX3JlZjIiLCJfcmVmMiRvcGVuIiwiY29uc29sZSIsImVycm9yIiwibG9hZCJdLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ob29rcy91c2VDaGF0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZUNvbnRleHQsIHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgU3RhdGUgfSBmcm9tICcuLi90eXBlcydcbmltcG9ydCB7IExpdmVDaGF0TG9hZGVyQ29udGV4dCB9IGZyb20gJy4uL2NvbnRleHQnXG5pbXBvcnQgKiBhcyBQcm92aWRlcnMgZnJvbSAnLi4vcHJvdmlkZXJzJ1xuXG5jb25zdCByZXF1ZXN0SWRsZUNhbGxiYWNrID1cbiAgdHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcgPyB3aW5kb3cucmVxdWVzdElkbGVDYWxsYmFjayA6IG51bGxcbmNvbnN0IGNvbm5lY3Rpb24gPVxuICB0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJ1xuICAgID8gLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgICAgIHdpbmRvdy5uYXZpZ2F0b3IgJiYgKHdpbmRvdy5uYXZpZ2F0b3IgYXMgYW55KS5jb25uZWN0aW9uXG4gICAgOiBudWxsXG5cbmNvbnN0IHVzZUNoYXQgPSAoXG4gIHtcbiAgICBsb2FkV2hlbklkbGVcbiAgfToge1xuICAgIGxvYWRXaGVuSWRsZTogYm9vbGVhblxuICB9ID0geyBsb2FkV2hlbklkbGU6IGZhbHNlIH1cbik6IFtTdGF0ZSwgKHsgb3BlbiB9OiB7IG9wZW46IGJvb2xlYW4gfSkgPT4gdm9pZF0gPT4ge1xuICBjb25zdCB7XG4gICAgcHJvdmlkZXIsXG4gICAgcHJvdmlkZXJLZXksXG4gICAgaWRsZVBlcmlvZCxcbiAgICBtYXhJZGxlUGVyaW9kLFxuICAgIHN0YXRlLFxuICAgIHNldFN0YXRlLFxuICAgIGFwcElELFxuICAgIGxvY2FsZSxcbiAgICBiYXNlVXJsLFxuICAgIGJlZm9yZUluaXQsXG4gICAgb25SZWFkeVxuICB9ID0gdXNlQ29udGV4dChMaXZlQ2hhdExvYWRlckNvbnRleHQpXG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyBEb24ndCBsb2FkIGlmIGlkbGVQZXJpb2QgaXMgMCwgbnVsbCBvciB1bmRlZmluZWRcbiAgICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcgfHwgIWxvYWRXaGVuSWRsZSB8fCAhaWRsZVBlcmlvZCkgcmV0dXJuXG5cbiAgICAvLyBEb24ndCBsb2FkIGlmIDJnIGNvbm5lY3Rpb24gb3Igc2F2ZS1kYXRhIGlzIGVuYWJsZWRcbiAgICBpZiAoXG4gICAgICBjb25uZWN0aW9uICYmXG4gICAgICAoY29ubmVjdGlvbi5zYXZlRGF0YSB8fCAvMmcvLnRlc3QoY29ubmVjdGlvbi5lZmZlY3RpdmVUeXBlKSlcbiAgICApXG4gICAgICByZXR1cm5cblxuICAgIGlmIChpc05hTihpZGxlUGVyaW9kKSkgcmV0dXJuXG5cbiAgICAvLyBkZWFkbGluZS50aW1lUmVtYWluaW5nKCkgaGFzIGFuIHVwcGVyIGxpbWl0IG9mIDUwIG1pbGxpc2Vjb25kc1xuICAgIC8vIFdlIHdhbnQgdG8gZW5zdXJlIHRoZSBwYWdlIGhhcyBiZWVuIGlkbGUgZm9yIGEgc2lnbmlmaWNhbnQgcGVyaW9kIG9mIHRpbWVcbiAgICAvLyBUaGVyZWZvcmUgd2UgY291bnQgY29uc2VjdXRpdmUgbWF4aW11bSB0aW1lUmVtYWluaW5nIGNvdW50cyBhbmQgbG9hZCBjaGF0IHdoZW4gd2UgcmVhY2ggb3VyIHRocmVzaG9sZFxuICAgIGxldCBlbGFwc2VkSWRsZVBlcmlvZCA9IDBcbiAgICBsZXQgcHJldmlvdXNUaW1lUmVtYWluaW5nID0gMFxuICAgIGNvbnN0IHNjaGVkdWxlTG9hZENoYXQgPSAoZGVhZGxpbmU6IElkbGVEZWFkbGluZSkgPT4ge1xuICAgICAgaWYgKGVsYXBzZWRJZGxlUGVyaW9kID4gaWRsZVBlcmlvZCkgcmV0dXJuIGxvYWRDaGF0KHsgb3BlbjogZmFsc2UgfSlcblxuICAgICAgY29uc3QgdGltZVJlbWFpbmluZyA9IGRlYWRsaW5lLnRpbWVSZW1haW5pbmcoKVxuICAgICAgLy8gVG8gZW5zdXJlIGJyb3dzZXIgaXMgaWRsZSwgb25seSBhY2N1bWFsdGUgZWxhcHNlZElkbGVQZXJpb2Qgd2hlblxuICAgICAgLy8gdHdvIGNvbnNlY3V0aXZlIG1heGltdW0gdGltZVJlbWFpbmluZydzIGhhdmUgYmVlbiBvYnNlcnZlZFxuICAgICAgaWYgKHByZXZpb3VzVGltZVJlbWFpbmluZyA+IDQ5ICYmIHRpbWVSZW1haW5pbmcgPiA0OSlcbiAgICAgICAgZWxhcHNlZElkbGVQZXJpb2QgKz0gdGltZVJlbWFpbmluZ1xuXG4gICAgICBwcmV2aW91c1RpbWVSZW1haW5pbmcgPSB0aW1lUmVtYWluaW5nXG4gICAgICByZXF1ZXN0SWRsZUNhbGxiYWNrPy4oc2NoZWR1bGVMb2FkQ2hhdClcbiAgICB9XG5cbiAgICBpZiAocmVxdWVzdElkbGVDYWxsYmFjaykge1xuICAgICAgcmVxdWVzdElkbGVDYWxsYmFjayhzY2hlZHVsZUxvYWRDaGF0KVxuICAgICAgc2V0VGltZW91dCgoKSA9PiBsb2FkQ2hhdCh7IG9wZW46IGZhbHNlIH0pLCBtYXhJZGxlUGVyaW9kKVxuICAgIH0gZWxzZSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IGxvYWRDaGF0KHsgb3BlbjogZmFsc2UgfSksIGlkbGVQZXJpb2QpXG4gICAgfVxuICB9LCBbXSlcblxuICBjb25zdCBjaGF0UHJvdmlkZXIgPSBQcm92aWRlcnNbcHJvdmlkZXJdXG5cbiAgY29uc3QgbG9hZENoYXQgPSB1c2VDYWxsYmFjazwoYXJnczogeyBvcGVuOiBib29sZWFuIH0pID0+IHZvaWQ+KFxuICAgICh7IG9wZW4gPSB0cnVlIH0gPSB7IG9wZW46IHRydWUgfSkgPT4ge1xuICAgICAgaWYgKCFwcm92aWRlcktleSkge1xuICAgICAgICAvL2VzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1jb25zb2xlXG4gICAgICAgIGNvbnNvbGUuZXJyb3IoJ05vIGFwaSBrZXkgZ2l2ZW4gdG8gcmVhY3QtbGl2ZS1jaGF0LWxvYWRlcicpXG4gICAgICAgIHJldHVyblxuICAgICAgfVxuXG4gICAgICBpZiAoIXByb3ZpZGVyKSB7XG4gICAgICAgIC8vZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcbiAgICAgICAgY29uc29sZS5lcnJvcignTm8gcHJvdmlkZXIgZ2l2ZW4gdG8gcmVhY3QtbGl2ZS1jaGF0LWxvYWRlcicpXG4gICAgICAgIHJldHVyblxuICAgICAgfVxuXG4gICAgICBjaGF0UHJvdmlkZXIubG9hZCh7XG4gICAgICAgIHByb3ZpZGVyS2V5LFxuICAgICAgICBzZXRTdGF0ZSxcbiAgICAgICAgYXBwSUQsXG4gICAgICAgIGxvY2FsZSxcbiAgICAgICAgYmFzZVVybCxcbiAgICAgICAgYmVmb3JlSW5pdCxcbiAgICAgICAgb25SZWFkeVxuICAgICAgfSlcblxuICAgICAgaWYgKG9wZW4pIHtcbiAgICAgICAgY2hhdFByb3ZpZGVyLm9wZW4oKVxuICAgICAgICBpZiAoc3RhdGUgIT09ICdjb21wbGV0ZScpIHNldFN0YXRlKCdvcGVuJylcbiAgICAgIH1cbiAgICB9LFxuICAgIFtzdGF0ZV1cbiAgKVxuXG4gIHJldHVybiBbc3RhdGUsIGxvYWRDaGF0XVxufVxuXG5leHBvcnQgZGVmYXVsdCB1c2VDaGF0XG4iXSwibWFwcGluZ3MiOiJBQUFBLFNBQVNBLFVBQVUsRUFBRUMsV0FBVyxFQUFFQyxTQUFTLFFBQVEsT0FBTztBQUcxRCxTQUFTQyxxQkFBcUI7QUFDOUIsT0FBTyxLQUFLQyxTQUFTO0FBRXJCLElBQU1DLG1CQUFtQixHQUN2QixPQUFPQyxNQUFNLEtBQUssV0FBVyxHQUFHQSxNQUFNLENBQUNELG1CQUFtQixHQUFHLElBQUk7QUFDbkUsSUFBTUUsVUFBVSxHQUNkLE9BQU9ELE1BQU0sS0FBSyxXQUFXO0FBQ3pCO0FBQ0FBLE1BQU0sQ0FBQ0UsU0FBUyxJQUFLRixNQUFNLENBQUNFLFNBQVMsQ0FBU0QsVUFBVSxHQUN4RCxJQUFJO0FBRVYsSUFBTUUsT0FBTyxHQUFHLFNBQVZBLE9BQU9BLENBQUEsRUFNd0M7RUFBQSxJQUFBQyxJQUFBLEdBQUFDLFNBQUEsQ0FBQUMsTUFBQSxRQUFBRCxTQUFBLFFBQUFFLFNBQUEsR0FBQUYsU0FBQSxNQUQvQztNQUFFRyxZQUFZLEVBQUU7SUFBTSxDQUFDO0lBSHpCQSxZQUFZLEdBQUFKLElBQUEsQ0FBWkksWUFBWTtFQUtkLElBQUFDLFdBQUEsR0FZSWYsVUFBVSxDQUFDRyxxQkFBcUIsQ0FBQztJQVhuQ2EsUUFBUSxHQUFBRCxXQUFBLENBQVJDLFFBQVE7SUFDUkMsV0FBVyxHQUFBRixXQUFBLENBQVhFLFdBQVc7SUFDWEMsVUFBVSxHQUFBSCxXQUFBLENBQVZHLFVBQVU7SUFDVkMsYUFB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