mannynotfound / react-tweet

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

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.

Dependencies

To get full video functionality, include videojs in your app. You can use the http://vjs.zencdn.net/5-unsafe/video.js as a CDN path. If you dont include videojs it should fall back to native HTML5 video.

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_str: '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 () {
    // use linkProps if you want to pass attributes to all links
    const linkProps = {target: '_blank', rel: 'noreferrer'}

    return (
      <Tweet data={tweetData} linkProps={linkProps} />
    )
  }
}

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
• Isomorphic Rendering

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

react-tweet's Issues

Add support for displaying threads

The twitter api does not directly support threads. We can still infer the start, end, and membership of a thread from the in_reply_to_status_id field. While displaying tweets it might be beneficial to indicate that they are part of a thread.

Here is how I would like to implement this:-

To mimic's Twitter desktops implementation of thread display we would need to add a pseudo div after the user avatar for adding a bar. The tweet data will have following boolean fields
isThreadStart, isThreadMember and isThreadEnd

Forking and changing the footer

I assume there is no problem in making a fork of this and adding a new icon to the footer? I am making a Twitter app where I need a new icon in the footer.

Could you please explain what the 4th div in the Footer.js render is doing? Is it a placeholder? Can I just add something here or does it do something in rare cases? In the example app it is empty.

This one:

<div className="ProfileTweet-action" style={styles.ProfileTweetAction}> <button className="ProfileTweet-actionButton" style={styles.ProfileTweetActionBtn}> <div className="IconContainer" style={styles.IconContainer}> <span className="Icon Icon--more" style={styles.Icon} /> </div> </button> </div>

Document the approach - recreating layout instead of embedding

Same issue as abraham/twitter-status#75 - looks like this component does a lot of work to recreate Twitter's layout. Other components use the embedding API. How should a developer choose? The superiority of this component's approach might be lost on those who think "Oh, I can just use the embedding API/component".

Moving to styled-components

Using styled-components would probably lead to cleaner code. Plus, hover effects and more are possible.

I would look into that somewhere in the next weeks if you like :)

Build error

With the recent changes in build process, I get the following error output after running npm install on a fresh clone of the master branch:

$ npm install
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> [email protected] prepublish /home/fabi/github/react-tweet
> npm run build:js


> [email protected] build:js /home/fabi/github/react-tweet
> babel --plugins transform-runtime ./src/components -d ./lib

SyntaxError: src/components/Tweet/Context.js: Unexpected token (10:6)
   8 | 
   9 |     return (
> 10 |       <div className="context" style={styles.context}>
     |       ^
  11 |         <div className="tweet-context">
  12 |           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72" style={styles.IconContext}>
  13 |             <path d="M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z"/>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:js: `babel --plugins transform-runtime ./src/components -d ./lib`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/fabi/.npm/_logs/2018-01-21T22_02_16_701Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepublish: `npm run build:js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Text getting appended in the DOM more than once

When iterating on a twitter api v1.1 search result, I am doing a map on the array to render <Tweet />.

I use uuid/v4 to generate unique key, after trying multiple over solution.

No matter what I do, I get the text appended multiple times in the dom randomly.

I have checked the data, everything fines, there's a bug in here.

Uncaught TypeError: Cannot read property 'childNodes' of undefined when using data from search api v1.1

I am using react-tweet to test display data from search endpoint of twitter api v1.1, this is what I get when I try to render the data:

Uncaught TypeError: Cannot read property 'childNodes' of undefined
    at grabAllTextNodes (twemoji.npm.js:294)
    at parseNode (twemoji.npm.js:348)
    at Object.parse (twemoji.npm.js:548)

Shouldn't this api be compatible with the search API?

Thanks for sharing

A ton of warnings in the console

Firstly, thanks a lot for this package. It's exactly what we were looking for, saved us hours and hours of work. 👍

I'm seeing a ton of warnings with react 0.15 like so:

warning.js:44 Warning: a button tag (owner: unknown) was passed a numeric string value for CSS property margin (value: 0) which will be treated as a unitless number in a future version of React.

Is it a compatibility issue with 0.15?

Use profile_image_url_https instead of http

Hi, thanks so much for your work. I've seen you are retrieving this field profile_image_url_https instead of profile_image_url to draw profile picture on Tweet component.

I've got some errors on my website which is loaded through https when it loads a tweet from an account it gets the http url.

Deployment not working

Does it support in react-native?

does this library support in react-native language for mobile application development.

Unsupported style property margin-top. Did you mean marginTop?

Hi, I am just testing out your module and I have the following in my console:

Warning: Unsupported style property margin-top. Did you mean marginTop?
    in div (created by Header)
    in a (created by Header)
    in div (created by Header)
    in Header (created by Tweet)
    in div (created by Tweet)
    in div (created by Tweet)
    in Tweet (at TwitterPreviewField.js:22)

Add option to autoplay videos

Currently animated GIFs are autoplayed but videos do not have a option to be autoplayed. Please add a prop to autoplay (or not ) videos

Should the react-tweet version in package-lock.json be manually updated?

I cloned this repo and ran npm install. Running this command updated the package-lock.json file

-  "version": "1.4.1",
+  "version": "1.4.3",

Looks like we need to bump the version in this file also when we bump it in package.json

Media and quote tweet urls in tweet text

I guess media urls and quote tweet urls should be hidden in tweet text...somehow twitter-text includes those in the AutoLinkWithJSON method....

Prettify all the code (ie run prettier)

I followed this blogpost to run prettier on this repo.

This was the command I used to run prettier

git filter-branch -f --tree-filter '\
    prettier --single-quote   \
    --trailing-comma es5 \
    --print-width=100 --write "**/**.js" || \
    echo “Error formatting, possibly invalid JS“' -- --all

I pushed the branch with the rewritted git history to my repo

https://github.com/sudarshang/react-tweet/tree/prettify

Would you be interested in doing a force merge of that branch? I don't have any strong opinions about prettier options. If you want to use another set of options that would be totally fine with me. Since I started with prettier working without automated code formatting has become very difficult for me.

TypeError: Cannot read property 'forEach' of undefined

Apparently the free streaming API sometimes gives me tweets that have an entities prop that doesn't have a urls prop, causing react-tweet to crash my app with TypeError: Cannot read property 'forEach' of undefined because of line 86 in Text.js:

// remove any quote links
if (entities && data.quoted_status) {
          entities.urls.forEach(function(u) {

Simple fix: Change to:
if (entities && entities.urls && data.quoted_status) {

Inline styles not working as expected

Ex: font-family: "font-size:14px;line-height:18px;list-style-image:none;list-style-position:outisde;list-style-type:none;padding:9px 12px;position:relative;text-align:start;

http://i.imgur.com/qJDoNgP.jpg
http://i.imgur.com/8pzMghH.png

import * as React from "react"
import * as Tweet from 'react-tweet'
import styles from './styles'
import {getData} from '../fetch'

export default class extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            tweets:getData().twitter
        }
    }
    render() {
        return(
            <div style={styles.backgroundColorNine}>
                <div style={styles.background}>
                    <div style={styles.tweetContainer}>
                        {
                            this.state.tweets.map( (item:any, i:number) => {
                                return <div style={styles.tweet}>
                                    <Tweet data={item} />
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

Another thing, import Tweet from 'react-tweet' wasn't working, that's why the * is in there. May be a versioning diff? Node -v v6.5.0

  "dependencies": {
    "body-parser": "^1.15.2",
    "compression": "^1.6.2",
    "concurrently": "^2.1.0",
    "css-loader": "^0.23.1",
    "del": "^2.2.1",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "fs": "0.0.2",
    "html-minifier": "^3.0.3",
    "mysql": "^2.11.1",
    "node-sass": "^3.8.0",
    "nodemon": "^1.9.2",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-hot-loader": "^1.3.0",
    "react-router": "^2.4.1",
    "readline": "^1.3.0",
    "sass-loader": "^3.2.1",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "twitter-js-client": "0.0.5",
    "typescript": "^1.8.10",
    "typings": "^1.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }

Typescript keeps throwing
Cannot find module 'react-tweet'.

Can't resolve './lib/Tweet/Tweet'

During the fall I was using the react-tweet library for a project with no problems. After coming back to it, I am now getting this error when trying to compile my React webpage:

ERROR in ./~/react-tweet/index.js
Module not found: Error: Can't resolve './lib/Tweet/Tweet'

Something seems to have changed since November which broke this for me

twitter-text as support for URL entities, and long url replacement

In Text rather than:

    text = twitterText.autoLink(text, {'usernameIncludeSymbol': true});

I suggest:

    text = twitterText.autoLinkWithJSON(text, entities, {'usernameIncludeSymbol': true});

error on npm install

Hi,

Once running npm install to install dependencies from package.json I see the following error:

$ npm install
npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 but none was installed.

Cheers

Could react be a peerDependency?

I was checking out package.json and noticed that react is a dependency, so now my node_modules folder has 2 copies of react, your 0.14 version and my main 0.15 version.

Would it be possible to switch react to being a peerDependency instead? My npm packaging fu is not strong enough to say outright that it is possible, maybe it has other implications. I've seen quite a few packages using this approach with react, so I guess it is possible somehow, just not sure how much work is involved in getting there...

VideoJS is creating error

React.createClass in VideoJS is creating compiling errors as it is deprecated

use videojs for video tweets

Twitter.com uses the VideoJS project to handle video. The current

https://github.com/esportsguy/react-videojs

react-videojs outdated

warning "react-tweet > [email protected]" has incorrect peer dependency "react@^0.14.0".
warning "react-tweet > [email protected]" has incorrect peer dependency "react-dom@^0.14.0".
warning "react-tweet > [email protected]" has incorrect peer dependency "webpack@^1.0.0"

TypeError: null is not an object (evaluating 'o._currentElement')

I'm getting the above error when trying to render a tweet out and despite searching for an answer for the past few hours I can't figure out why.

The tweet I'm using is 887654816507408384.

Here is my package.json:

{
  "name": "Tweet Music",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "gulp",
    "build": "gulp build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015": "^6.9.0",
    "dropbox": "^2.5.5",
    "express": "^4.15.3",
    "he": "^1.1.1",
    "history": "^2.0.0",
    "jquery": "^3.1.1",
    "jwt-decode": "^2.1.0",
    "moment": "^2.15.1",
    "react": "^15.3.2",
    "react-addons-shallow-compare": "^15.3.2",
    "react-bootstrap": "^0.30.5",
    "react-bootstrap-date-picker": "^3.7.0",
    "react-bootstrap-table": "^2.5.5",
    "react-dates": "^3.3.1",
    "react-datetime": "^2.6.2",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.5.2",
    "react-select": "^1.0.0-rc.5",
    "react-tinymce": "^0.5.1",
    "react-toggle": "^2.1.1",
    "react-toggle-switch": "^2.1.2",
    "react-tweet": "^1.1.1",
    "redux": "^3.5.2",
    "redux-persist": "^4.0.0-alpha5",
    "socket.io": "^2.0.3",
    "socket.io-client": "^2.0.3",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.11.0",
    "browser-sync": "^2.18.12",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean-css": "^3.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^3.0.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^3.3.0",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^2.5.1",
    "webpack-hot-middleware": "^2.13.0",
    "webpack-stream": "^3.2.0"
  }
}