Введение

При создании веб-приложения часто бывает полезно отобразить предварительный просмотр содержимого ссылки — например, как платформы социальных сетей показывают предварительный просмотр ссылок, когда вы делитесь URL-адресом. Таким образом, вместо просто текста URL-адреса вы также можете отображать такую ​​информацию, как изображения и описание, рядом с URL-адресом.

В этом посте я расскажу вам о встраивании ссылок в приложение React и получении метаданных Open Graph (таких как заголовок, изображение и описание) с использованием axios и cherio для очистки HTML-кода целевой страницы.

Мы создадим простой компонент EmbeddedLink, который извлекает и отображает метаданные Open Graph для любого предоставленного URL-адреса.

Предварительные условия

Прежде чем мы начнем, убедитесь, что у вас установлено следующее:

1. React — настройте проект React с помощью приложения Create React или любым другим способом, который вы предпочитаете.
2. Axios — для выполнения HTTP-запросов.
3. Cheerio — для анализа и очистки HTML (серверная библиотека, подобная jQuery, обычно используемая для очистки).

Вы можете установить Axios и Cheerio, используя следующие команды:

npm install axios cheerio

Шаг 1. Создание компонента EmbeddedLink

Мы создадим новый компонент EmbeddedLink, который принимает URL-адрес в качестве реквизита и извлекает метаданные Open Graph из этой ссылки, которые мы будем использовать позже. Вот полный код:

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;

Шаг 2. Использование компонента EmbeddedLink

Теперь вы можете использовать компонент EmbeddedLink в своем приложении React следующим образом:

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

function App() {
    return (
        

            
Link Preview Example
            
        
    );
}

export default App;

При этом будет отображен предварительный просмотр предоставленного URL-адреса с его изображением, заголовком и описанием.

Обработка ошибок и загрузка состояний

Мы обрабатываем потенциальные ошибки и состояния загрузки, показывая пользователю соответствующие сообщения:

• Во время извлечения метаданных отображается простое сообщение «Загрузка...», или вы можете использовать какой-нибудь анимационный счетчик или что-то еще.
• Если во время загрузки что-то пойдет не так (например, проблема с сетью), отобразится сообщение об ошибке.

Заключение

Когда вы закончите, вы увидите результат, как на картинке ниже.

Я предпочитаю этот стиль встроенных ссылок dev.to, но вы можете оформить его по своему усмотрению.