[React]React IframeでHTMLの情報を表示する

はじめに

React Ifameを使って、HTMLを表示するURLを表示する方法を書いていきます。

参考

こちらがドキュメントになります。
https://www.npmjs.com/package/react-iframe

React Iframeをインストール

まずは、以下のコマンドでReact Iframeをインストールしていきます。

ターミナル

npm install react-iframe

packege.jsonを確認します。

packege.json

"dependencies": {
    "react-iframe": "^1.8.5",
  },

コードに適用する

React Ifameを使用するには、以下のようなコードにします。
今回は、News APIで取得できるURLを使用します。

import Iframe from "react-iframe";

<Iframe 
 url={"https://www3.nhk.or.jp/news/html/20231007/k10014218571000.html"} 
 width="100%"
 height="1000px"
/>

すると、、、

このように、表示できるようになりました！

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
基本設計について
Vue.jsとNode.jsでチャットアプリを作った
Next.js×TypeScriptでTODOアプリを作成する