1

I am trying to embed a twitter timeline of a particular page in a react-bootstrap Panel however I am unable to get it to work. I am not getting any console logging output which makes me think that I have not gotten it set up properly, however I am unsure as to what the issue is. I am using react-twitter-widgets to embed the timeline.

My component is as follows:

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

function twitterTimeline() {
  return (
    <Timeline
      dataSource={{
        sourceType: 'profile',
        screenName: 'MetEireann',
      }}
      options={{
        username: 'MetEireann',
        height: '400',
      }}
      onLoad={() => console.log('Timeline is loaded!')}
    />
  );
}

export default twitterTimeline;

And then I am using it like so in my react-bootstrap Panel:

import twitterTimeline from '../../components/TwitterTimeline';
.....

<div className="col-lg-4">
   <Panel
     header={<span>
       <i className="fa fa-bar-chart fa-fw" /> Weather Forecast
       </span>}
    >
      <twitterTimeline />
    </Panel>
</div>

The component is being loaded in so the issue is obviously with the component itself. enter image description here

Any help would be greatly appreciated. Thanks in advance.

Community
  • 1
  • 1
devdc
  • 83
  • 1
  • 11

0 Answers0