Language message handler within the content script for a browser extension built using React + event-driven model.

languageMessageHandler.tsx

function initMessageHandler() {
  // ...
  useEffect(() => {
    // Listening for updates by the service worker
    chrome.runtime.onMessage.addListener(handleMessageListener);
    return () => {
      chrome.runtime.onMessage.removeListener(handleMessageListener);
    };
  }, []);
}
const handleMessageListener = (message: Message) => {
  // ...
  if (message.type === "languageUpdated") {
    const { language, translations } = message.data;
    // namespace (ns) group set of translations (separated files)
    i18n
      .addResources(language, "${ns}", translations["${ns}"])
      .changeLanguage(language);
  }
};