react static tweets

Уведомление об исчезновении

Vercel выпустил React-Tweet, которая является лучшей поддерживаемой версией этой библиотеки. Пожалуйста, используйте это вместо этого.

---

Реагировать статические твиты

Чрезвычайно быстрый статический визуализатор для твитов.

Демо

Посетите React-static-tweets.vercel.app и добавьте свой твит-идентификатор. Вы также можете добавить /dynamic/<tweetId> если вы хотите проверить версию без SSR.

Почему?

Внедрение Twitter SDK ужасно медленное и неэффективное. Для встраивания твитов на вашем сайте (включая SSR) это решение значительно более эффективно.

Этот проект занимает работу Vercel по статическому твит-рендерингу и упаковывает его в два простых в использовании пакетов NPM.

Функции

• ⚡ Быстрый - 10-100x быстрее, чем использование IFRAME в Twitter.
• Твердый -используется в производстве Super.SO, React-Notion-X и другими.
• Simple - TypeScript + React.

Установить

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

Примечание. Этот проект в настоящее время работает только с Next.js (см. № 2 для получения дополнительной информации).

Использование

Вам нужно будет предварительно сберегать сервер данных твита, используя fetchTweetAst , а затем отобразить его с помощью компонента Tweet .

 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 : {
        tweetAst
      } ,
      revalidate : 10
    }
  } catch ( err ) {
    console . error ( 'error fetching tweet' , err )

    throw err
  }
}

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

Обратите внимание, что Tweet является компонентом сервера React, и был протестирован с помощью следующего.js 13 appDir .

Расширенное использование

Если у вас есть несколько твитов, и мы в порядке с использованием клиентских компонентов, то мы рекомендуем использовать встроенный TwitterContextProvider для хранения карты от твитского идентификатора, чтобы твитнуть AST.

В этом примере мы используем импорт клиентских компонентов из react-static/tweets/client , которые используют контекст React под капотом:

 import React from 'react'
import pMap from 'p-map'
import { fetchTweetAst } from 'static-tweets'
import { TweetClient , TwitterContextProvider } from 'react-static-tweets/client'

// NOTE: You'll likely infer your list of tweets by introspecting your page's
// content from a CMS.
const tweetIds = [
  '1358199505280262150' ,
  '1374492662061953034' ,
  '1358199505280262150'
  // ...
]

export const getStaticProps = async ( ) => {
  try {
    // Fetch all tweet ASTs statically
    const tweetAsts = await pMap ( tweetIds , fetchTweetAst , {
      concurrency : 4
    } )

    // Create a map from tweet ID to tweet AST
    const tweetAstMap = tweetIds . reduce ( ( tweetId , map , index ) => ( {
      ... map ,
      [ tweetId ] : tweetAsts [ index ]
    } ) )

    return {
      props : {
        tweetAstMap
      } ,
      revalidate : 60
    }
  } catch ( err ) {
    console . error ( 'error fetching tweets' , err )

    throw err
  }
}

export default function Example ( { tweetAstMap } ) {
  return (
    < TwitterContextProvider value = { { tweetAstMap } } >
      { tweetIds . map ( ( tweetId ) => (
        < div key = { tweetId } >
          { /* 
          There's no need to pass the tweet AST directly if it is provided via TwitterContextProvider. This is nice in situations where you're 
          rendering tweets in deeply nested component trees.
          */ }
          < TweetClient id = { tweetId } />
        </ div >
      ) ) }
    </ TwitterContextProvider >
  )
} 

Стили

Вам также нужно импортировать некоторые стили CSS. Для next.js мы рекомендуем поместить их на pages/_app :

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

Next.js config

Добавьте pbs.twimg.com в next.config.js , так как мы используем next/image для загрузки изображений.

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

Next.js Пример

Вот пример проекта Next.js с наиболее важным кодом на pages/[tweetId].tsx . Вы можете просмотреть этот пример Live на Vercel.

Пакеты

Упаковка	Npm	Среда	Описание
статические твиты		Node.js	Выбирает твиты в Твиттере.
реагируют-статические твиты		Браузер + SSR	React redender для твитов, данных AST.

Динамический рендеринг на стороне клиента

react-static-tweets предназначены для того, чтобы твиты как можно эффективно. Компонент Tweet предполагает, что вы уже заранее заранее заранее данные твита AST, скорее всего, во время SSR.

Поддерживается динамические твиты на стороне клиента; Тем не менее, вам нужно будет обернуть fetchTweetAst в маршруте API, так как его нельзя использовать из браузера.

Вы можете просмотреть пример этого в действии через example/pages/dynamic/[tweetId].tsx .

Кредит

Мой основной вклад-упаковка превосходной работы команды Vercel в два изолированных пакета: static-tweets для получения серверных твитов и react-static-tweets для рендеринга на стороне клиента, а также SSR.

• Вдохновлена этой демонстрацией от команды Vercel
• И основной репо Луис Альварес
• Большая часть основного кода адаптирована из блога Гильермо Рауха
• Преобразовал кодовую базу JS в TypeScript
• Снятый styled-jsx потому что использование плоского файла CSS (с префиксом класса .static-tweet ) облегчает комплект для NPM.
• Исправлены некоторые незначительные ошибки форматирования

Лицензия

MIT © Трэвис Фишер

Поддержите мою работу OSS, следуя за мной в Твиттере