Embed Twitter timeline widgets ReactJS

Twitter embed

There are different kind of things you can embed to your own sites

Like: Profile timeline, Follow Button, Mention, Hashtag, Share etc…

Twitter timeline

Twitter timeline widgets used to embed a collection of Tweets on your own website.

Two types of embedded timelines available, which look and feel like timelines on

• Profile: Display public Tweets from any account on Twitter.
• List: Show Tweets from public Lists.

react-twitter-embed

This package is used to add all these functionality on your react site.

react-twitter-embed

Install

npm install --save react-twitter-embed

Adding Timeline:

import { TwitterTimelineEmbed } from 'react-twitter-embed';
<TwitterTimelineEmbed 
    sourceType="profile" 
    userId={"1029587508445630465"} 
    options={{height: 400}} 
/>
<TwitterTimelineEmbed
  sourceType="profile"
  screenName="makavana_romik"
  options={{height: 400}}
  onComplete={action}
/>

Props

sourceType : profile, likes, list, collection, url, widget

Other props requires based on what you pass to sourceType.

Like : screenName, userId, ownerScreenName, url, etc…

Note: userId mostly pass in string sometime Number may be to large to handle.

Adding Tweet:

<TwitterTweetEmbed tweetId={'1437057815156191237'} />

Adding Share Button:

<TwitterShareButton
    url={'https://google.com'}
    options={{ 
        text: 'React Twitter Widgets - Romik Makavana', 
        via: 'makavana_romik' 
    }}
/>

Adding Mention Button:

<TwitterMentionButton
    screenName={'makavana_romik'}
  />

Adding Hashtag button:

<TwitterHashtagButton
    tag={'cybersecurity'}
  />

Adding follow button:

<TwitterFollowButton
    screenName={'makavana_romik'}
  />

Conclusion

In conclusion, by using this package you can directly get all the functions in your react project.

Thanks.