Quick and easy Twitter widgets for React.

Available widgets: Timeline, Share, Follow, Hashtag, Mention, Tweet.

See below for usage.

Storybook / Live Demo

npm install --save react-twitter-widgets

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

// Timeline (with options)
<Timeline
  dataSource={{
    sourceType: 'profile',
    screenName: 'TwitterDev'
  }}
  options={{
    height: '400'
  }}
  // Optional
  // onLoad={() => console.log('Timeline is loaded!')}
/>

// Tweet (without options)
<Tweet tweetId="841418541026877441" />

Official Twitter Documentation

Available widgets: Timeline, Share, Follow, Hashtag, Mention, Tweet

Timeline requires a dataSource object prop. The source type can be profile, likes, list, collection, or url. They each require their own co-fields; see Twitter documentation.

Share requires a url prop.

Follow and Mention require a username prop. NOTE that the Twitter documentation now refers to this as screenName.

Hashtag requires a hashtag prop.

Tweet requires a tweetId prop. Ex. '511181794914627584'

All widgets accept these props.

• options (object)
  • To learn more about the available options (height, width, align, count, etc), refer to the Twitter documentation.
• onLoad (function)
  • Called every time the widget is loaded. A widget will reload if its props change.
• renderError (function)
  • Render prop. Rendered if widget cannot be loaded (no internet connection, screenName not found, bad props, etc).
  • Example: renderError={(_err) => <p>Could not load timeline</p>}

• This library loads the remote Twitter for Websites script.
• Twitter widgets are only loaded in the browser. A blank div will be rendered during SSR.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

• Andrew Suzuki - @andrewsuzuki - andrewsuzuki.com

MIT