KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

react-twitter-widgets

★ 277 Open GitHub ↗

Twitter widgets as React components

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-twitter-widgets

[![npm version](https://badge.fury.io/js/react-twitter-widgets.svg)](https://badge.fury.io/js/react-twitter-widgets)
[![npm downloads](https://img.shields.io/npm/dm/react-twitter-widgets.svg)](https://badge.fury.io/js/react-twitter-widgets)
[![GitHub issues](https://img.shields.io/github/issues/andrewsuzuki/react-twitter-widgets)](https://github.com/andrewsuzuki/react-twitter-widgets/issues)

Quick and easy Twitter widgets for React.

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

See below for usage.

## Demo

**[Storybook / Live Demo](https://andrewsuzuki.github.io/react-twitter-widgets/)**

## Installation

```
npm install --save react-twitter-widgets
```

## Example

```javascript
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**](https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-factory-functions)

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](https://twittercommunity.com/t/removing-support-for-embedded-like-collection-and-moment-timelines/150313) 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`, and `via`). There are further options for button widgets, tweet buttons, Timeline, and Tweet.
- `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>}`

### Lazy vs. Eager Loading

By default, the remote Twitter library will be lazy-loaded when the first widget renders. To instead load it eagerly, call `eagerLoadTwitterLibrary`.

```js
import { eagerLoadTwitterLibrary } from "react-twitter-widgets";
eagerLoadTwitterLibrary();
```

## Further Information

- This library loads the remote _Twitter for Websites_ library.
- Twitter widgets are only loaded in the browser. A blank div will be rendered during SSR.

## Contributing

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

## Credits

- Andrew Suzuki - @andrewsuzuki - [andrewsuzuki.com](http://andrewsuzuki.com)

## License

MIT

react-twitter-widgets

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README