परिचय

वेब एप्लिकेशन बनाते समय, लिंक की सामग्री का पूर्वावलोकन दिखाना अक्सर उपयोगी होता है - जैसे कि जब आप यूआरएल साझा करते हैं तो सोशल मीडिया प्लेटफ़ॉर्म लिंक पूर्वावलोकन कैसे दिखाते हैं। इसलिए केवल यूआरएल टेक्स्ट के बजाय आप यूआरएल के बगल में चित्र और विवरण जैसी अन्य जानकारी भी दिखा सकते हैं।

इस पोस्ट में, मैं आपको लक्ष्य पृष्ठ के HTML को स्क्रैप करने के लिए एक्सिओस और चीयरियो का उपयोग करके ओपन ग्राफ़ मेटाडेटा (जैसे शीर्षक, छवि और विवरण) लाने के दौरान रिएक्ट ऐप में लिंक एम्बेड करने के बारे में बताऊंगा।

हम एक सरल एंबेडेडलिंक घटक बनाएंगे जो किसी भी दिए गए यूआरएल के लिए ओपन ग्राफ़ मेटाडेटा लाएगा और प्रदर्शित करेगा।

आवश्यक शर्तें

शुरू करने से पहले, सुनिश्चित करें कि आपने निम्नलिखित इंस्टॉल कर लिया है:

1. React - क्रिएट रिएक्ट ऐप या अपनी पसंद की किसी भी विधि का उपयोग करके एक रिएक्ट प्रोजेक्ट सेट करें।
2. Axios - HTTP अनुरोध करने के लिए।
3. चेरियो - HTML को पार्स करने और स्क्रैप करने के लिए (एक सर्वर-साइड jQuery जैसी लाइब्रेरी जो आमतौर पर स्क्रैपिंग के लिए उपयोग की जाती है)।

आप निम्नलिखित कमांड का उपयोग करके एक्सियोस और चीयरियो इंस्टॉल कर सकते हैं:

npm install axios cheerio

चरण 1: एंबेडेडलिंक घटक बनाना

हम एक नया एंबेडेडलिंक घटक बनाएंगे जो एक प्रोप के रूप में यूआरएल लेता है और उस लिंक से ओपन ग्राफ़ मेटाडेटा लाता है जिसे हम बाद में उपयोग करेंगे। यहां पूरा कोड है:

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: एंबेडेडलिंक घटक का उपयोग करना

अब आप अपने रिएक्ट ऐप में एंबेडेडलिंक घटक का उपयोग इस तरह कर सकते हैं:

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

function App() {
    return (
        

            
Link Preview Example
            
        
    );
}

export default App;

यह छवि, शीर्षक और विवरण के साथ प्रदान किए गए यूआरएल का पूर्वावलोकन प्रस्तुत करेगा।

त्रुटियों को संभालना और स्थिति लोड करना

हम उपयोगकर्ता को उचित संदेश दिखाकर संभावित त्रुटियों और लोडिंग स्थितियों को संभालते हैं:

• जब मेटाडेटा लाया जा रहा है, तो एक सरल "लोड हो रहा है..." संदेश दिखाया जाता है या आप कुछ एनीमेशन स्पिनर या जो कुछ भी उपयोग कर सकते हैं।
• यदि लाने के दौरान कुछ गलत हो जाता है (उदाहरण के लिए, नेटवर्क समस्या), तो त्रुटि संदेश प्रदर्शित होता है।

निष्कर्ष

जब आपका काम पूरा हो जाए, तो आपको नीचे दिए गए चित्र की तरह परिणाम देखने में सक्षम होना चाहिए।

मैं एम्बेडेड लिंक शैली की तुलना में इस dev. को पसंद करता हूं, लेकिन आप इसे अपनी पसंद और पसंद के अनुसार स्टाइल कर सकते हैं।