Introducción

Al crear una aplicación web, suele ser útil mostrar una vista previa del contenido de un enlace, como la forma en que las plataformas de redes sociales muestran vistas previas de enlaces cuando compartes una URL. Entonces, en lugar de solo el texto de la URL, también puede mostrar información como imágenes y descripciones, junto a la URL.

En esta publicación, lo guiaré a través de cómo insertar enlaces en una aplicación React, mientras obtengo metadatos de Open Graph (como título, imagen y descripción) usando axios y cheerio para extraer el HTML de la página de destino.

Crearemos un componente EmbeddedLink simple que recupera y muestra metadatos de Open Graph para cualquier URL proporcionada.

Requisitos previos

Antes de comenzar, asegúrese de tener instalado lo siguiente:

1. React: configura un proyecto de React usando Create React App o cualquier método que prefieras.
2. Axios – Para realizar solicitudes HTTP.
3. Cheerio – Para analizar y raspar HTML (una biblioteca similar a jQuery del lado del servidor que generalmente se usa para raspar).

Puedes instalar Axios y Cheerio usando los siguientes comandos:

npm install axios cheerio

Paso 1: creación del componente EmbeddedLink

Crearemos un nuevo componente EmbeddedLink que toma una URL como accesorio y recupera los metadatos de Open Graph de ese enlace que usaremos más adelante. Aquí está el 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;

Paso 2: uso del componente EmbeddedLink

Ahora puedes usar el componente EmbeddedLink en tu aplicación React de esta manera:

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

function App() {
    return (
        

            
Link Preview Example
            
    );
}

export default App;

Esto mostrará una vista previa de la URL proporcionada, con su imagen, título y descripción.

Manejo de errores y estados de carga

Manejamos posibles errores y estados de carga mostrando mensajes apropiados al usuario:

• Mientras se obtienen los metadatos, se muestra un mensaje simple "Cargando..." o puedes usar alguna animación giratoria o lo que sea.
• Si algo sale mal durante la recuperación (por ejemplo, un problema de red), se muestra el mensaje de error.

Conclusión

Cuando haya terminado, debería poder ver el resultado como en la imagen a continuación.

Prefiero este estilo de desarrollo al de enlace incrustado, pero puedes diseñarlo como quieras y prefieras.