# react-twitter-widgets

> Twitter widgets as React components

Latest version **1.11.0** (published 2022-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-twitter-widgets
pnpm add react-twitter-widgets
yarn add react-twitter-widgets
bun add react-twitter-widgets
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.11.0 |
| Published | 2022-06-26 |
| First published | 2016-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 78.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 277 |
| Author | Andrew Suzuki |
| Maintainers | andrewsuzuki |
| Keywords | react, component, twitter, embed, widgets, twttr, timeline, feed, share, tweet, share, follow, hashtag, button, mention |

## Links

- npm: https://www.npmjs.com/package/react-twitter-widgets
- Repository: https://github.com/andrewsuzuki/react-twitter-widgets
- Issues: https://github.com/andrewsuzuki/react-twitter-widgets/issues
- npm.io page: https://npm.io/package/react-twitter-widgets

## Dependencies (1)

- [loadjs](https://npm.io/package/loadjs.md) ^4.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.11.0 (latest) — 2022-06-26
- 1.10.0 — 2021-03-30
- 1.9.5 — 2020-06-02
- 1.9.4 — 2020-06-02
- 1.9.3 — 2020-06-01
- 1.9.2 — 2020-06-01
- 1.9.1 — 2020-06-01
- 1.9.0 — 2020-06-01
- 1.8.0 — 2020-06-01
- 1.7.1 — 2017-09-27
- 1.7.0 — 2017-09-27
- 1.6.1 — 2017-09-18
- 1.5.1 — 2017-09-08
- 1.5.0 — 2017-08-30
- 1.4.0 — 2017-06-27
- … 12 more at https://npm.io/package/react-twitter-widgets/versions

## README

# 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

---
_Source: https://npm.io/package/react-twitter-widgets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._