React.js Embed Instagram Media on Website Using react-instagram-media Library Full Tutorial with Examples

React.js Embed Instagram Media on Website Using react-instagram-media Library Full Tutorial with Examples

 

Welcome folks today in this blog post we will be talking about react-instagram-media which will embed instagram media into your website. All the source code of examples are given below.

 

 

Install

 

 

npm i react-instagram-media

 

 

 

 

Basic Usage

 

 

 

import { InstagramMedia } from 'react-instagram-media'
 
<InstagramMedia
  uri="https://www.instagram.com/p/B866lKJgReK/"
 
  renderItem={
    ({ display_url, video_url, type, caption }) => {
      if (type === 'video') {
        return (
          <video poster={display_url} controls>
            <source src={video_url} type="video/mp4" />
          </video>
        )
      }
 
      return (
        <img
          src={display_url}
          alt={caption}
        />
      )
    }
  }
 
  renderMediaList={children => (
    <div className="swiper">
      {children}
    </div>
  )}
 
  renderError={() => (
    <div>I have failed to parse it</div>
  )}
 
  renderLoading={() => (
    <div>Loading</div>
  )}
/>

 

 

 

Properties

 

 

 

Prop Required Type Description
uri true string The uri of the post to get fetched
renderItem true function Render prop for each media to be displayed. Receives the media’s data as parameter.
renderMediaList false function Render prop for posts with multiple medias. Helps wrapping them into a swiper. Receives the media list as a parameter.
renderError false function Render prop for a standard error message. This can be useful if you don’t trust Instagram, or this library. Receives the invalid uri as a parameter.
renderLoading false function Render prop for a standard loading message or placeholder.
See also  React.js Building a Tic Tac Toe Computer AI Single or MultiPlayer Board Game Using react-tic-tac-toe Library in Javascript Full Project For Beginners

 

 

Leave a Reply