How to embed Twitter widget to Reactjs?

Question

Going to the twitter widget site (https://publish.twitter.com/) I am able to get a widget to add to my site. I am using the sample code to try to understand hot it works:

<a class="twitter-grid" href="https://twitter.com/TwitterDev/timelines/539487832448843776">National Park Tweets</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

If I just add this to an HTML page then the code works exactly as it should. It shows the grid with the respective tweets.

However, when adding this to ReactJS all I see is the fallback code, which merely provides a link to the twitter username.

I have tried using the following to no avail:

  <div dangerouslySetInnerHTML={{__html: "<a className='twitter-grid' href='https://twitter.com/TwitterDev/timelines/539487832448843776'>National Park Tweets</a> <script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>"}}>
  </div>

Answer 1

Check out this npm package: react-twitter-widgets. This seems to be accomplishing what you need out of box.

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

ReactDOM.render(<Tweet tweetId='511181794914627584'/>, document.getElementById('root'))