README

React Static Tweets

Static renderer for tweets.

Install

npm install react-static-tweets

Usage

The easiest way to get started is to render tweets client-side (which will by default fetch the tweet AST 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 [ fetchTweetAst } from 'static-tweets'
import { 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 Example({ tweetId, tweetAst }) => {
  return <Tweet id={tweetId} ast={tweetAst} />
}

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.js:

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

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

Support my OSS work by following me on twitter

@jarred/react-static-tweets

Usage no npm install needed!