https://github.com/andrewsuzuki/react-twitter-widgets

Twitter widgets as React components
https://github.com/andrewsuzuki/react-twitter-widgets

Last synced: 11 days ago
JSON representation

Twitter widgets as React components

• Host: GitHub
• URL: https://github.com/andrewsuzuki/react-twitter-widgets
• Owner: andrewsuzuki
• Created: 2016-03-04T00:15:50.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-09-07T18:42:52.000Z (about 2 years ago)
• Last Synced: 2024-10-20T00:00:14.345Z (20 days ago)
• Language: JavaScript
• Homepage: https://andrewsuzuki.github.io/react-twitter-widgets/
• Size: 2.37 MB
• Stars: 276
• Watchers: 7
• Forks: 59
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - andrewsuzuki/react-twitter-widgets - Twitter widgets as React components (JavaScript)

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)

// Timeline (with options)

```

## 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) => 
Could not load timeline
}`


### 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