lluiscamino / fake-tweet

Tweet React Component

Fake Tweet

Tweet React component. See a live demo.

Example

Installation

npm i fake-tweet

Usage

The following snippet is an example of use of the fake-tweet component:

import React from "react";
import FakeTweet from "fake-tweet";

function App() {
  const config = {
    user: {
      nickname: "twitter",
      name: "Twitter",
      avatar: "avatar.png",
      verified: true,
      locked: false
    },
    display: "default",
    text: "This is a fake tweet",
    image: "",
    date: "3:32 PM · Feb 14, 1997",
    app: "Twitter for iPhone",
    retweets: 32000,
    quotedTweets: 100,
    likes: 12700
  };
  return (
    <div className="App">
      <FakeTweet config={config} />
    </div>
  );
}

export default App;

You also need to pass a config object to the component with the following properties:

• User:
  • Nickname: Twitter @username
  • Name
  • Avatar: Twitter avatar URL
  • Verified: Set to true to include the verified icon
  • Locked: Set to true to include the private account icon
• Display: Twitter theme (default, dim or lightsout)
• Text: The text the tweet will display
• Image (optional): You can include an image to the tweet. Can be either a single URL string or an array of up to four URL strings for multiple images.
• Date: A string that represents a date
• App: For example, "Twitter for iPhone"
• Retweets: Number of retweets
• Quoted Tweets: Number of quoted tweets
• Likes: Number of likes

fake-tweet's Issues

Using fake-tweet with bootstrap CDN makes icons really small

Hi! I was using fake-tweet and then by importing the bootstrap CDN the icons became this

Any ideas on how to fix this?

Add support for @mentions and #hashtags

When a @mention or a @hashtag is present on the tweet, it should be displayed as a link

Add support for URLs

If a URL is present on the tweet and, it should be displayed according to Twitter cards docs.

If the site has no twitter:card metatag, then the URL should be displayed as a regular link.

Add normal node support

Perhaps make it so this is not limited to just react. I wanna use this on other node projects.