React.js Embed Instagram API Post in App Using react-instagram-embed Library Full Tutorial

Welcome folks today in this blog post we will be using the react-instagram-embed library to embed any instagram post inside the browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below library using the below command as shown below

npm i react-instagram-embed

And now you need to use this library it’s very simple inside the App.js file copy paste the below code

App.js

import React from "react";
import "./styles.css";
import InstagramEmbed from 'react-instagram-embed';


export default function App() {
  return (
    <div className="App">
      <InstagramEmbed
  url='https://instagr.am/p/Zw9o4/'
  maxWidth={500}
  hideCaption={true}
  containerTagName='div'
  protocol=''
  injectScript
  onLoading={() => {}}
  onSuccess={() => {}}
  onAfterRender={() => {}}
  onFailure={() => {}}
/>
    </div>
  );
}

import React from "react";

import "./styles.css";

import InstagramEmbed from 'react-instagram-embed';

export default function App() {

return (

<InstagramEmbed

url='https://instagr.am/p/Zw9o4/'

maxWidth={500}

hideCaption={true}

containerTagName='div'

protocol=''

injectScript

onLoading={() => {}}

onSuccess={() => {}}

onAfterRender={() => {}}

onFailure={() => {}}

</div>

);

}

As you can see you need to replace your instagram post url and then you need to attach the width and height of the image. And now if you open the react.js app you will see the below result as shown below