React hook for Intellipse bottom overlap

intellipseOverlap.js

import React, { useState, useRef, useEffect } from 'react'

const getOverlap = transform => {
  const overlap =
    -1 * parseInt(transform.replace(/translateY\((.*)px\)/, '$1'), 10)
  const intellipsePadding = 10
  return Math.max(overlap - intellipsePadding, 0)
}

export const useIntellipseOverlap = () => {
  const [intellipseOverlap, setIntellipseOverlap] = useState(0)
  const isMounted = useRef(true)

  const launchObserver = rootElem => {
    if (!rootElem) {
      if (isMounted.current) {
        setTimeout(() => {
          const intellipseIframe = document.getElementById('intellipse-client')
          launchObserver(intellipseIframe)
        }, 500)
      } else {
        console.log('hook has unmounted, no more retries')
      }
      return
    }

    const mutationCallback = (mutationsList, observer) => {
      try {
        mutationsList.forEach(mutation => {
          if (
            mutation.type === 'attributes' &&
            mutation.attributeName === 'style'
          ) {
            const { transform } = mutation.target.style
            if (isMounted.current) {
              const overlap = transform.includes('translateY')
                ? getOverlap(transform)
                : 0
              setIntellipseOverlap(overlap)
            }
          }
        })
      } catch (err) {
        console.error(err)
      }
    }

    const mutObserver = new MutationObserver(mutationCallback)
    const mutationConfig = { attributes: true }
    mutObserver.observe(rootElem, mutationConfig)
  }

  useEffect(() => {
    const intellipseIframe = document.getElementById('intellipse-client')
    if (
      intellipseIframe &&
      intellipseIframe.style.transform &&
      intellipseIframe.style.transform.includes('translateY')
    ) {
      setIntellipseOverlap(getOverlap(intellipseIframe.style.transform))
    }
    launchObserver(intellipseIframe)
    return function unmount() {
      isMounted.current = false
    }
  }, [])

  return intellipseOverlap
}

// Example usage:
const Component = () => {
  const overlap = useIntellipseOverlap()
  return <div style={{ position: 'absolute', width: '100%', height: '3rem', bottom: overlap }}>Bottom Banner</div>
}