【React】ポートフォリオに使えそうなタイムラインを作成する

# タイムラインとは？

こういうやつ。
自分のキャリアや人生をかっこよく見せることができる。

![app-tree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848520/a64de251-86dd-565e-a62f-398b8b6ca2c7.png)

# こちらのモジュールを使用します。
__React-Chrono__

https://github.com/prabhuignoto/react-chrono

# さっそく作ってみよう！


## create-react-app
```react
npx create-react-app my-app
```

## React Chronoをインストール！
```react
// install with yarn
yarn add react-chrono

// or with npm
npm install react-chrono
```

## データを表示してみよう！

タイムラインを表示するためには、表示するデータ群を作成し、
そのデータをChronoコンポーネントでWrapして上げると、表示されます。
まずは最小限のデータを表示するために以下のデータ群を作成してみます。
データ群は別のファイルとして作成し、App.jsでインポートして使うことにします。

### data.js
```react
export const data = [
  {
    title: "1896年8月",
    cardTitle: "誕生",
    url: "https://ja.wikipedia.org/wiki/%E8%AA%95%E7%94%9F",
    cardSubtitle: "宮沢賢治、生まれる",
    cardDetailedText:
      "1896年（明治29年）8月27日、父宮澤政次郎と母イチの長男として花巻川口町（現：花巻市）に生まれる。戸籍上の誕生日は8月1日で生前の賢治も履歴書に1日と書いているが、27日と推定されている。",
  },
  {
    title: "1909年4月",
    cardTitle: "入学",
    url: "https://ja.wikipedia.org/wiki/%E8%AA%95%E7%94%9F",
    cardSubtitle: "岩手県立盛岡中学校（現・盛岡第一高等学校）に入学",
    cardDetailedText:
      "岩手県立盛岡中学校（現・盛岡第一高等学校）に入学。寄宿舎「自彊じきょう寮」に入寮。祖父の喜助は商人の息子で跡継ぎの賢治に学問は不要という考えで、父の政次郎が説得して進学させた。",
  },
  {
    title: "1933年9月",
    cardTitle: "死",
    url: "https://ja.wikipedia.org/wiki/%E8%AA%95%E7%94%9F",
    cardSubtitle: "宮沢賢治、死す",
    cardDetailedText:
      " 9月21日、午前11時半、突然「南無妙法蓮華経」と唱題する声が聞こえたので家族が急いで二階の病室に行ってみると・・・",
  },
];


```

## App.jsを編集
作成したデータ群を以下の通り __Chrono__ コンポーネントでWrapしてあげることで表示されます。
詳細な設定等は後述します。

### App.js
```React
import React from "react";

/* import module */
import { Chrono } from "react-chrono";

/* import data */
import { data } from "./data";

function App() {
  return (
    <div style={{ width: "500px", height: "100vh" }}>
      <Chrono items={data} />
    </div>
  );
}

export default App;
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848520/63897ec7-e947-1752-b65c-eb489b45c96b.png)
表示することができました。


## 表示スタイルを変える

表示スタイルは3通り＋α あります。

| モード | プロパティ値 |
|:-:|:-:|
|  水平 |  mode="HORIZONTAL" | 
|  垂直1列 | mode="VERTICAL"  |   |
|  垂直2列 | mode="VERTICAL_ALTERNATING"  | 
|  スライドショウ | slideShow  | 

デフォルトでは水平モードになります。

水平
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848520/63897ec7-e947-1752-b65c-eb489b45c96b.png)

垂直1列
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848520/21ef7425-ae01-ca62-a335-95c97b5af3a8.png)


垂直2列
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2848520/c263f486-614c-ae11-de20-689c76974b8a.png)

スライドショウモードはそれ以外のプロパティと併用して使います。

```react
<div style={{ width: '500px', height: '950px' }}>
  <Chrono items={items} slideShow mode="VERTICAL_ALTERNATING" />
</div>
```

プロパティ一覧です。

| 名前 | 説明 | デフォルト値 |
|:-|:-|:-|
|mode|レイアウトの設定|HORIZONTAL|
|items|タイムラインに表示する情報|  [] |
|disableNavOnKey|キーボードナビゲーションを無効にします|false|
|slideShow|タイムラインをスライドショーモードで開始します|false|
|slideItemDuration|スライドショウモードのタイムラインポイントの遅延量（移動速度）|2500|
|titlePosition|水平モードでのタイトルの位置を設定します。TOPまたは_BOTTOM|TOP|
|itemWidth|水平モードでのタイムラインセクションの幅|320|

更に詳細な説明はChronoのGithubか公式サイトを参照してみてください。

参考にしたサイト

https://github.com/prabhuignoto/react-chrono

https://react-chrono.vercel.app/