How to change locale without page refresh?

[TimPchelintsev]

Thank you for great lib! I encounter this problem with dynamic language switching for embeded facebook page on gatsbyjs-powered site. When I try to use another lib(for facebook chat), it does not have this issue. Maybe you can kindly see their approach?

https://github.com/Yoctol/react-messenger-customer-chat/blob/master/src/MessengerCustomerChat.js

you need to "refresh" page because you need to redownload new sdk file. if you will found another way just let me know

Originally posted by @seeden in https://github.com/seeden/react-facebook/issues/82#issuecomment-404826316

[seeden]

hah :) nice. I will

[sirshurak]

Some updates on this?

[gtournie]

For now, here is my (ugly) workaround:

  const intl = useIntl()
  
  useEffect(() => {
    function replaceFBLocale() {
      const fbIframes = document.querySelectorAll("iframe[src*=facebook]")
      fbIframes.forEach((fbIframe) => {
        fbIframe.src = fbIframe.src.replace(/&locale=[a-zA-Z_]+/, "&locale=" + intl.locale.replace("-", "_"))
      })
      return !!fbIframes.length
    }

    // on facebook iframe first load
    let observer
    if (!replaceFBLocale()) {
      observer = new MutationObserver(() => replaceFBLocale() && observer.disconnect())
      observer.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })
    }

    return () => observer && observer.disconnect()
  }, [intl.locale])

For convenience, I put this code in a hook