Explicação 🧐

O código define um hook personalizado chamado useIframeHeight, que ajusta dinamicamente a altura de um iframe com base no conteúdo carregado dentro dele. Esse ajuste é feito assim que o conteúdo do iframe estiver completamente carregado.

Detalhamento do Código 🔍

1. Importação do useEffect 🔄

import { useEffect } from 'react'

• useEffect é importado do React. Esse hook é usado para executar efeitos colaterais, como manipulações de DOM, após a renderização do componente. No caso, ele será utilizado para adicionar e remover event listeners no iframe.

2. Definição do Hook useIframeHeight 🪝

export const useIframeHeight = () => {
  return (iframe: HTMLIFrameElement | null) => {

• O hook useIframeHeight é uma função que retorna outra função. O argumento dessa função é um iframe (do tipo HTMLIFrameElement ou null), que será manipulado para ajustar sua altura.

3. Função de Ajuste da Altura do iframe 🔧

    if (!iframe) return
 
    const adjustHeight = () => {
      if (iframe && iframe.contentWindow) {
        try {
          const document = iframe.contentWindow.document
          const height = document.body.scrollHeight
          iframe.style.height = `${height}px`
        } catch (err) {
          console.warn('Não foi possível acessar o conteúdo do iframe.')
        }
      }
    }

• adjustHeight: Função que ajusta a altura do iframe para o valor do scrollHeight do conteúdo interno do iframe.
  • Verificação do iframe: Se o iframe for null, a função retorna sem fazer nada.
  • iframe.contentWindow: Verifica se o iframe possui um contentWindow, o que indica que é possível acessar o conteúdo dentro dele.
  • document.body.scrollHeight: Obtém a altura total do conteúdo do iframe, considerando o conteúdo carregado.
  • iframe.style.height: Ajusta a altura do iframe com o valor obtido de scrollHeight.

Se ocorrer algum erro (por exemplo, se o conteúdo do iframe não for acessível), o código captura a exceção e exibe um aviso no console.

4. Adicionando o Event Listener para o load 🎧

    iframe.addEventListener('load', adjustHeight)

• O iframe.addEventListener escuta o evento load no iframe, que é disparado quando o conteúdo dentro do iframe é completamente carregado.
• Quando o evento load é disparado, a função adjustHeight é chamada, ajustando a altura do iframe.

5. Removendo o Event Listener ao Desmontar ⬇️

    return () => iframe.removeEventListener('load', adjustHeight)
  }
}

• A função retornada pelo hook useIframeHeight é uma função de limpeza, que remove o event listener load do iframe quando o componente que usa esse hook for desmontado. Isso evita problemas de memória e vazamentos de eventos.

Código Completo 👨‍💻

import { useEffect } from 'react'
 
export const useIframeHeight = () => {
  return (iframe: HTMLIFrameElement | null) => {
    if (!iframe) return
 
    const adjustHeight = () => {
      if (iframe && iframe.contentWindow) {
        try {
          const document = iframe.contentWindow.document
          const height = document.body.scrollHeight
          iframe.style.height = `${height}px`
        } catch (err) {
          console.warn('Não foi possível acessar o conteúdo do iframe.')
        }
      }
    }
 
    iframe.addEventListener('load', adjustHeight)
 
    return () => iframe.removeEventListener('load', adjustHeight)
  }
}