React Twitter Timelineモジュール作りました

フレームワーク

github.com

使い方

まず､こちらで新しくwidgetを作成し､ 表示されるコードの中のdata-widget-idの値を取得します｡

<a class="twitter-timeline" href="https://twitter.com/****" data-widget-id="your widget ID">****</a>

取得したwidget IDをwidgetIdプロパティとして次のようにコンポーネントに渡します｡

import React from 'react';
import ReactDOM from 'react-dom';
import { TwitterTimeline } from 'react-twitter-embedded-timeline';

class App extends React.Component {
  render() {
    return (
      <TwitterTimeline widgetId="695868534455275520" />
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('content')
);

表示を確認しましょう｡

https://camo.githubusercontent.com/5ec2d459738eb3cf2a76eb67ca062eb4f1ae5fea/687474703a2f2f692e696d6775722e636f6d2f6a77753779754b2e706e67

カスタマイズ

タイムラインフレームをカスタマイズするために､ chromeプロパティとして次の属性を渡すことができます｡

noheader,nofooter, noborders, noscrollbar, transparent

例:

  <TwitterTimeline widgetId="****" chrome="noheader noscrollbar" />

また､ 表示件数をlimitプロパティに値を渡すことで変更することができます｡

  <TwitterTimeline widgetId="****" limit="3" />

limitプロパティを使用した場合､ 新たなツイートを表示させることはできません｡

詳しくはこちら