/react-tweet

React.js component for rendering tweets as they are presented on Twitter.com

Primary LanguageJavaScript

live demo

React.js component for rendering tweets as they are presented on Twitter.com. Currently themed after the Desktop experience with the idea of a fixed width timeline. See the example app for an example of a tweet stream.

Motivation

react-tweet should make it easier to boostrap Twitter based React.js apps. This way we can focus on interesting ways to use and manipulate the API without the pains of rendering. Styles, assets, and HTML have been lifted from twitter.com and twitter dev docs. react-tweet uses only inline styles and while written in ES6, compiles to plain JS meant to be absorbed by any React project. react-tweet can be used a 'dumb' component for simply rendering data or could be a starting point for a more ambitious Tweet component.

Usage

Pass in tweet objects returned from twitter API Requests as a 'data' prop. Designed for use with search & home_timeline methods, although any object can be used as long as it has the following properties:

import React from 'react'
import Tweet from 'react-tweet'

const tweetData = {
  id: 'XXX',
  user: {
    name: 'XXX',
    screen_name: 'XXX',
    profile_image_url: 'XXX'
  },
  text: 'XXX',
  created_at: 'XXX',
  favorite_count: 'XXX',
  retweet_count: 'XXX',
  entities: {
    media: [],
    urls: [],
    user_mentions: [],
    hashtags: [],
    symbols: []
  } 
}

class MyTweetComponent extends React.Component {
  render () {
    return (
      <Tweet data={tweetData} />
    )
  }
}

Demo

  • live: live demo
  • local: run npm start & visit localhost:8080

Supported

  • Desktop Twitter.com styles
  • Retweets
  • Quote tweets
  • Auto-linking via twitter-text
  • Twitter Emoji support via twemoji
  • Modal mode for images

TODO:

  • Mobile style support
  • Better video support, seems Twitter uses custom player
  • Mimick video controls of Twitter.com
  • Add slideshow controls in Modal mode
  • Refactor how images get cropped, kind of a mess rn
  • Support for Tweet threads
  • Tests