React Twitter Timelineモジュール作りました
使い方
まず、こちらで新しく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') );
表示を確認しましょう。
カスタマイズ
タイムラインフレームをカスタマイズするために、 chrome
プロパティとして次の属性を渡すことができます。
noheader
,nofooter
, noborders
, noscrollbar
, transparent
例:
<TwitterTimeline widgetId="****" chrome="noheader noscrollbar" />
また、 表示件数をlimit
プロパティに値を渡すことで変更することができます。
<TwitterTimeline widgetId="****" limit="3" />
limit
プロパティを使用した場合、 新たなツイートを表示させることはできません。
詳しくはこちら