DEV Community

How to embed link with preview in React Application

This guide explains how to create a React component that fetches and displays Open Graph metadata for a given URL, such as title, image, and description. The component uses Axios for making HTTP requests and Cheerio for parsing and scraping HTML. To start, make sure you have React, Axios, and Cheerio installed. The EmbeddedLink component takes a URL as a prop and fetches the Open Graph metadata using Axios and Cheerio. It handles loading and error states by displaying appropriate messages. Once the metadata is fetched, it displays the title, image, and description of the link in a styled preview.
favicon
dev.to
dev.to