@sthakur/react-static-tweets
TypeScript icon, indicating that this package has built-in type declarations

0.7.13 • Public • Published

React Static Tweets

React Static Tweets

Extremely fast static renderer for tweets.

NPM Build Status Prettier Code Formatting

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

MIT © Travis Fischer

Support my OSS work by following me on twitter twitter

Readme

Keywords

none

Package Sidebar

Install

npm i @sthakur/react-static-tweets

Weekly Downloads

0

Version

0.7.13

License

MIT

Unpacked Size

159 kB

Total Files

56

Last publish

Collaborators

  • sthakur