How to use Twitter embed in ReactJS

#react #webdev #twitter

In this post, we'll look at how we use Twitter post and Twitter time-line embedding via ReactJS.

First of all, create a react project and then, run it on the localhost:

npx create-react-app my-app
cd my_app 
npm start

Then, type in the "my_app" folder's terminal:

npm install --save react-twitter-embed

Import the next at the top of App.js:

import { TwitterTweetEmbed, TwitterTimelineEmbed } from 'react-twitter-embed'

Now, for displaying the user's profile time-line we'll add the next to our code:

<TwitterTimelineEmbed
          sourceType="profile"
          // The preferred screen name goes next: 
          screenName="WHO"
          // Style options goes here:
          options={{ height: 600 }}
/>

Now, If we prefer to embed only 1 specific tweet, we'll do the next steps:
1) Go to the tweet and tap the "more options" button.
2) Tap on the "embed tweet button" and copy the tweet ID (the last section of the link it gives you on this website).
3) write the next in your code and change the tweet ID with your tweet ID:

<TwitterTweetEmbed 
        // Here goes your copied ID.
        tweetId={"1365778691414974470"} 
        // Style options goes here:
        optins={{width: "900px"}} 
/>

Thanks for reading, for viewing the results you can click on the link: https://corona-web-ruby.firebaseapp.com/

For other open-source React and Android native development, you can go to my GitHub: https://github.com/rubenrudov