ristic-react-twitter-widgets
v1.10.0
Published
Twitter widgets as React components
Downloads
4
Maintainers
Readme
react-twitter-widgets
Quick and easy Twitter widgets for React.
Available widgets: Timeline
, Share
, Follow
, Hashtag
, Mention
, Tweet
.
See below for usage.
Demo
Installation
npm install --save react-twitter-widgets
Example
import { Timeline } from 'react-twitter-widgets'
// Tweet (without options)
<Tweet tweetId="841418541026877441" />
// Timeline (with options)
<Timeline
dataSource={{
sourceType: 'profile',
screenName: 'TwitterDev'
}}
options={{
height: '400'
}}
/>
Usage
🔗 Official Twitter Documentation
Available widgets: Timeline
, Share
, Follow
, Hashtag
, Mention
, Tweet
Timeline
requires a dataSource
object prop. The source type can be profile
, list
, or url
. They each require their own co-fields; see Twitter documentation. NOTE that collection
, likes
, and moments
will be deprecated on June 23, 2021.
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'
Common Props
All widgets accept these props.
options
(object)- To learn more about the available options, refer to the Twitter documentation. There are four options that are common to all widgets (
lang
,dnt
,related
, andvia
). There are further options for button widgets, tweet buttons, Timeline, and Tweet.
- To learn more about the available options, refer to the Twitter documentation. There are four options that are common to all widgets (
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>}
Further Information
- 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.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
Credits
- Andrew Suzuki - @andrewsuzuki - andrewsuzuki.com
License
MIT