React Static Tweets Save

Extremely fast static renderer for tweets.

Project README

React Static Tweets

React Static Tweets

Extremely fast static renderer for tweets.

NPM Build Status Prettier Code Formatting

Why?

Twitter's embedding SDK is horribly slow and inefficient. For embedding tweets on your site (including SSR), this solution is 10-100x faster! ?

This project takes Vercel's work on static tweet rendering and packages it up into two easy-to-use NPM packages.

This project is being used in production by super.so.

Features

Install

npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns

Usage

The easiest way to get started is to render tweets client-side (which will fetch the tweet data on-the-fly).

import React from 'react'
import { Tweet } from 'react-static-tweets'

export default Example({ tweetId }) => (
  <Tweet id={tweetId} />
)

For more optimized SSR usage, you'll want to pre-fetch the tweet AST data server-side:

import React from 'react'
import { value fetchTweetAst } from 'static-tweets'
import { value Tweet } from 'react-static-tweets'

const tweetId = '1358199505280262150'

export const getStaticProps = async () => {
  try {
    const tweetAst = await fetchTweetAst(tweetId)

    return {
      props: {
        tweetId,
        tweetAst
      },
      revalidate: 10
    }
  } catch (err) {
    console.error('error fetching tweet info', err)

    throw err
  }
}

export default function Example({ tweetId, tweetAst }) {
  return <Tweet id={tweetId} ast={tweetAst} />
}

Add pbs.twimg.com to your next.config.js since we use next/image to load images.

module.exports = {
  images: {
    domains: ['pbs.twimg.com']
  }
}

Styles

You'll need to import some CSS styles as well. If you're using Next.js, we recommend you put these in pages/_app:

import 'react-static-tweets/styles.css'

Next.js Example

Here is an example Next.js project, with the most important code in pages/[tweetId].tsx. You can view this example live on Vercel.

Here is a live demo showing how different types of tweets render.

For more advanced exammples, check out:

Packages

Package NPM Docs Environment Description
react-static-tweets NPM docs Browser + SSR Fast React renderer for Tweets.
static-tweets NPM docs Node.js Fetches tweet ASTs.

Credit

My main contribution is packaging the Vercel team's excellent work into two isolated packages: static-tweets for server-side fetching of tweet ASTs and react-static-tweets for client-side rendering as well as SSR.

  • Inspired by this demo from the Vercel team
  • And the underlying repo by Luis Alvarez
  • Most of the core code is adapted from Guillermo Rauch's blog
  • Converted the JS codebase to TypeScript
  • Removed styled-jsx because using a flat CSS file (with a .static-tweet class prefix) makes bundling for NPM easier
  • Fixed some minor formatting bugs

License

MIT © Travis Fischer

Support my OSS work by following me on twitter twitter

Open Source Agenda is not affiliated with "React Static Tweets" Project. README Source: transitive-bullshit/react-static-tweets
Stars
438
Open Issues
16
Last Commit
2 months ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating