React Static Tweets

Extremely fast static renderer for tweets.

demo

View Demo View Github

Install

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

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} />
)
React TSX

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 function Example({ tweetId, tweetAst }) {
  return <Tweet id={tweetId} ast={tweetAst} />
}
React TSX

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

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

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

GitHub

https://github.com/transitive-bullshit/react-static-tweets