React.js Twitter API to Embed Profile and Posts Media on Website Using react-twitter-embed Library

Hello, friend React.js Twitter API to Embed Profile and Posts Media on Website Using react-twitter-embed Library article We are going to know the topic clearly. The reason for that is that our friends have a lot of doubts. We hope the doubts will be resolved through this article. Let’s go inside this article and buy it.

React.js Twitter API to Embed Profile and Posts Media on Website Using react-twitter-embed Library

Installation

In order to proceed we need to install the following library into our react.js project as shown below with the help of npm command

npm i react-twitter-embed

After installing this library you can use this inside your application

Embeding Twitter Timeline

First of all we will see how to see how to embed twitter profile timeline on website using this library. First of all we need to import the required libraries inside our react.js project like this as shown below

import { TwitterTimelineEmbed, TwitterShareButton, TwitterFollowButton, TwitterHashtagButton, TwitterMentionButton, TwitterTweetEmbed, TwitterMomentShare, TwitterDMButton, TwitterVideoEmbed, TwitterOnAirButton } from 'react-twitter-embed';

After importing this libraries you just need to replace your twitter username in the below snippet of code to get the twitter timeline of that particular twitter account

<TwitterTimelineEmbed
  sourceType="profile"
  screenName="saurabhnemade"
  options={{height: 400}}
/>

Full Source Code

Now we will look at the full source code of the example.

Make a index.tsx file and copy paste the following code

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { TwitterTimelineEmbed, TwitterShareButton, TwitterFollowButton, TwitterHashtagButton, TwitterMentionButton, TwitterTweetEmbed, TwitterMomentShare, TwitterDMButton, TwitterVideoEmbed, TwitterOnAirButton } from 'react-twitter-embed';


const App = () => {
  return (
    <div className="App">
       <TwitterTimelineEmbed
  sourceType="profile"
  screenName="saurabhnemade"
  options={{height: 400}}
/>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

Embeding Particular Tweet Media

Now you can also embed particular twitter tweet media as shown below

<TwitterTweetEmbed
  tweetId={'933354946111705097'}
/>

Adding Twitter Share Button on Website

You can also add twitter share button on the website using this below code

<TwitterShareButton
    url={'https://facebook.com/saurabhnemade'}
    options={{ text: '#reactjs is awesome', via: 'saurabhnemade' }}
  />

Adding Twitter Mention Button on Website

You can also add twitter mention button on the website using this code

<TwitterMentionButton
    screenName={'saurabhnemade'}
  />

Add Twitter HashTag Button on Website

You can also add twitter hashtag button on the website using this code

<TwitterHashtagButton
    tag={'cybersecurity'}
  />

Add Twitter Follow Button on Website

You can also add twitter follow button on website using this code

<TwitterFollowButton
    screenName={'saurabhnemade'}
  />

Add Twitter Moment Share Button on Website

You can also add twitter moment share button on the website using this code

<TwitterMomentShare
    momentId={'650667182356082688'}
  />

Add Twitter Direct Messaging Button on Website

You can also add twitter direct messaging button on the website using this code

<TwitterDMButton
    id={1364031673}
  />

Add Twitter Video to Website

You can also any twitter video media on the website using this code

<TwitterVideoEmbed
    id={'560070183650213889'}
  />

Add Twitter on Air Button

You can also add Twitter on Air Button on the website using this code

<TwitterOnAirButton
    id={'560070183650213889'}
  />

Read Also: React.js Project to Crop Image in Rounded or Circular Shape with Colorful Borders Using react-rounded-image Library

Final Words

React.js Twitter API to Embed Profile and Posts Media on Website Using react-twitter-embed Library We hope the article has resolved your doubts. Also, let us know if you have any doubts and we will resolve your doubts.