React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript

Welcome folks today in this blog post we will be using the react-twitter-widgets library inside the react.js to embed the user tweets and timeline in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command

npx create-react-app twitterapp

cd twitterapp

Now you need to install the below library using the npm command as shown below

npm i react-twitter-widgets

And after that you need to copy paste the below code inside the App.js file

Showing Tweet of User

import './App.css';
import {Tweet } from 'react-twitter-widgets'


function App() {
  return (
    <div className="App">
      <Tweet tweetId="841418541026877441" options={{theme:"dark",align:"center",width:"200"}} />
/>
    </div>
  );
}

export default App;

import './App.css';

import {Tweet } from 'react-twitter-widgets'

function App() {

return (

</div>

);

}

export default App;

As you can see we are importing the tweet component from the library and here we are passing the tweetId and also the theme option which can be either dark or light and then we are centering the tweet and providing fixed width to it.

Showing Timeline of Twitter Username

Now we can pass the username of twitter using the below component to show the timeline of tweets as shown below

App.js

import './App.css';
import { Timeline } from 'react-twitter-widgets'


function App() {
  return (
    <div className="App">
      <Timeline
  dataSource={{
    sourceType: 'profile',
    screenName: 'blackcaps'
  }}
  options={{
    height: '400'
  }}
/>
    </div>
  );
}

export default App;

import './App.css';

import { Timeline } from 'react-twitter-widgets'

function App() {

return (

<Timeline

dataSource={{

sourceType: 'profile',

screenName: 'blackcaps'

}}

options={{

height: '400'

}}

</div>

);

}

export default App;

Follow and Share Buttons

Now you can very easily show the follow and share buttons inside your own website of twitter. Whenever someone clicks on them it will be redirected to your twitter profile as shown below

App.js

import './App.css';
import { Follow,Share } from 'react-twitter-widgets'


function App() {
  return (
    <div className="App">
  
<Follow username="reactjs" options={{ size: "large" }} />

<Share url='https://webninjadeveloper.com' options={{size:'large',text:"Share my Website"}} />


    </div>
  );

}

export default App;

import './App.css';

import { Follow,Share } from 'react-twitter-widgets'

function App() {

return (

</div>

);

}

export default App;

As you can see we are passing the url that we want to share and also the size of the button and also the text which will be written to share your website. And then for the follow button you need to replace your own twitter username so that users can follow you.

Hashtag Button

Now you can even tweet with a certain number of hashtags using this below code

App.js

import './App.css';
import { Hashtag } from 'react-twitter-widgets'


function App() {
  return (
    <div className="App">
 

<Hashtag hashtag='javascript' options={{size:'large'}} />


    </div>
  );

}

export default App;

import './App.css';

import { Hashtag } from 'react-twitter-widgets'

function App() {

return (

</div>

);

}

export default App;