Introdução

Ao criar um aplicativo da web, geralmente é útil mostrar uma prévia do conteúdo de um link, da mesma forma que as plataformas de mídia social mostram visualizações de links quando você compartilha um URL. Então, em vez de apenas o texto do URL, você também pode mostrar informações como fotos e descrição, ao lado do URL.

Nesta postagem, orientarei você na incorporação de links em um aplicativo React, enquanto busca metadados do Open Graph (como título, imagem e descrição) usando axios e cheerio para extrair o HTML da página de destino.

Criaremos um componente EmbeddedLink simples que busca e exibe metadados Open Graph para qualquer URL fornecido.

Pré-requisitos

Antes de começarmos, certifique-se de ter o seguinte instalado:

1. React – Configure um projeto React usando Create React App ou qualquer método de sua preferência.
2. Axios – Para fazer solicitações HTTP.
3. Cheerio – Para analisar e raspar HTML (uma biblioteca semelhante a jQuery do lado do servidor geralmente usada para raspagem).

Você pode instalar Axios e Cheerio usando os seguintes comandos:

npm install axios cheerio

Etapa 1: Criando o componente EmbeddedLink

Criaremos um novo componente EmbeddedLink que recebe um URL como suporte e busca os metadados do Open Graph desse link que usaremos mais tarde. Aqui está o código completo:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import cheerio from 'cheerio';

const EmbeddedLink = ({ url }) => {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [imageUrl, setImageUrl] = useState('');
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');

    useEffect(() => {
        const fetchOGData = async () => {
            try {
                const response = await axios.get(url, {
                    headers: {
                        'origin': 'https://mysite.com'
                    }
                });
                const html = response.data;

                // Parse HTML content using Cheerio
                const $ = cheerio.load(html);
                const ogImage = $('meta[property="og:image"]').attr('content');
                const ogTitle = $('meta[property="og:title"]').attr('content');
                const ogDesc = $('meta[property="og:description"]').attr('content');

                setImageUrl(ogImage || '');
                setTitle(ogTitle || '');
                setDescription(ogDesc || '');
                setLoading(false);
            } catch (error) {
                setError(error);
                setLoading(false);
            }
        };

        fetchOGData();
    }, [url]);

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            {imageUrl && }
            
                {title && 
{title}
}
            
            {!imageUrl && !title && 
No preview available
}
            
{description}
            
{url}
        
    );
};

export default EmbeddedLink;

Etapa 2: usando o componente EmbeddedLink

Agora você pode usar o componente EmbeddedLink em seu aplicativo React assim:

import React from 'react';
import EmbeddedLink from './EmbeddedLink';

function App() {
    return (
        

            
Link Preview Example
            
        
    );
}

export default App;

Isso renderizará uma visualização do URL fornecido, com sua imagem, título e descrição.

Tratamento de erros e carregamento de estados

Lidamos com possíveis erros e estados de carregamento mostrando mensagens apropriadas ao usuário:

• Enquanto os metadados estão sendo buscados, uma mensagem simples "Carregando..." é mostrada ou você pode usar algum girador de animação ou qualquer outra coisa.
• Se algo der errado durante a busca (por exemplo, um problema de rede), a mensagem de erro será exibida.

Conclusão

Quando terminar, você poderá ver o resultado como na imagem abaixo.

Eu prefiro este estilo dev.to link incorporado, mas você pode estilizá-lo como quiser e preferir.