読者です 読者をやめる 読者になる 読者になる

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

React.js

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プロパティを使用した場合、 新たなツイートを表示させることはできません。

詳しくはこちら