Detection of Google Translate Usage in React

useIsMachineTranslationEnabled.ts

import * as React from 'react'

export function useIsMachineTranslationEnabled() {
  const [isMachineTranslationEnabled, setIsMachineTranslationEnabled] =
    React.useState(false)

  React.useEffect(() => {
    if (isMachineTranslationEnabled) {
      return
    }
    const originalLang = document.documentElement.lang

    // For most browsers including Chrome, Firefox, and Safari.
    const documentElementObserver = new MutationObserver(() => {
      const lang = document.documentElement.lang
      if (lang !== originalLang) {
        setIsMachineTranslationEnabled(true)
      }
    })

    documentElementObserver.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['lang'],
      childList: false,
      characterData: false,
    })

    // For Microsoft Edge
    let titleObserver: MutationObserver | null = null
    const title = document.querySelector('title')
    if (title != null) {
      titleObserver = new MutationObserver(() => {
        if (title.hasAttribute('_msttexthash')) {
          setIsMachineTranslationEnabled(true)
        }
      })
      titleObserver.observe(title, {
        attributes: true,
        attributeFilter: ['_msttexthash'],
        childList: false,
        characterData: false,
      })
    }

    return () => {
      documentElementObserver.disconnect()
      titleObserver?.disconnect()
    }
  }, [isMachineTranslationEnabled])

  return isMachineTranslationEnabled
}