How to Insert an Iframe in React ?
Last Updated :
01 Nov, 2023
In this article, we are going to insert an Iframe in React JS. The iframe stands for the inline frame. The “iframe” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current document.
Prerequisites:
Approach
In this approach, we are using the iframe tag provided in HTML as a JSX, and in the source, we are displaying the React JS Official Site. In this approach, we do not need any dependencies to install on our computer system.
Syntax:
<iframe src="URL" title="description"></iframe>
Example: In this example, we will create an iframe and render a website into that frame.
Javascript
import React from 'react'
function App() {
return (
<div className= "App" >
<div>
<h2 style={{ color: 'green' }}>
GeeksforGeeks
</h2>
<h2>
How to create an Iframe in React
</h2>
<iframe width= "560"
height= "315"
src=
title= "GeeksforGeeks" >
</iframe>
</div>
</div>
)}
export default App;
|
Output
Share your thoughts in the comments
Please Login to comment...