react-vertical-timeline-component(日本語)

このコンポーネントは、ウェブサイトやウェブアプリケーション上でイベント、開発の歴史、プロジェクトの歴史、会社のマイルストーンなどを時系列順にリストアップするために使用されます。

Features

  1. 再利用、拡張、メンテナンスが容易です。

  2. ユーザーの入力や外部データに基づいて、動的なコンテンツの更新が可能です。


Installation

react-vertical-timeline-componentをインストールするには、npmまたはyarnを使用できます。このパッケージを使用すると、Reactプロジェクトの所望のコンポーネントに簡単に垂直タイムラインを追加することができます。

Cautions

「Reactは既にプロジェクトにインストールされている必要があります。したがって、まだReactプロジェクトを開始していない場合は、まずcreate-react-appを使用してプロジェクトを作成する必要があります。」

  • Name
    更新の確認
    Type
    Cautions
    Description

    パッケージの更新を常に確認し、必要に応じてパッケージの更新または変更をプロジェクトに適用するようにしてください。

Installation

npm i react-vertical-timeline-component

Usage

まず、パッケージをインポートし、次にVerticalTimelineとVerticalTimelineElementのインスタンスを作成する必要があります。

  • Name
    VerticalTimeline コンポーネント
    Type
    Usage
    Description

    VerticalTimelineコンポーネントを使用してタイムラインを作成します。このコンポーネントはタイムラインの骨組みとなります。

  • Name
    VerticalTimelineElement コンポーネント
    Type
    Usage
    Description

    VerticalTimelineElementコンポーネントを使用して、各タイムライン要素を作成します。このコンポーネントは、日付、タイトル、サブテキストなど、タイムライン内の個々のアイテムを表します。

Cautions

  • Name
    CSS
    Type
    Cautions
    Description

    このコンポーネントはCSS-in-JSの方式を採用しているため、カスタムスタイルを適用するには、パッケージのデフォルトスタイルを上書きする必要があります。

  • Name
    Reactのバージョン
    Type
    Cautions
    Description

    このパッケージはReactプロジェクトで使用されるため、Reactのバージョンがこのパッケージと互換性があるか確認する必要があります。

Usage

import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

VerticalTimeline

<VerticalTimeline>
    <VerticalTimelineElement
        className="vertical-timeline-element--work"
        date="2011 - present"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    >
        <h3 className="vertical-timeline-element-title">Creative Director</h3>
        <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
        <p>
        Creative Direction, User Experience, Visual Design, Project Management,
        Team Leading
        </p>
    </VerticalTimelineElement>
</VerticalTimeline>

Customization

react-vertical-timeline-componentは、レスポンシブな縦型のタイムラインを作成するのに便利なReactコンポーネントです。以下は、このコンポーネントをカスタマイズする方法についての説明です。

Explanation

VerticalTimeline Props

  • Name
    animate
    Type
    Customization
    Description
    • 要素のアニメーションを有効または無効にします。
    • デフォルト値はtrueです。
  • Name
    className
    Type
    Customization
    Description
    • ルートのdiv要素に追加するクラス名を指定します。
  • Name
    layout
    Type
    Customization
    Description
    • '1-column-left'、'1-column-right'、'2-columns'のいずれかを選択します。
    • デフォルト値は'2-columns'です。
  • Name
    lineColor
    Type
    Customization
    Description
    • タイムラインの色を選択します。
    • デフォルト値は'white'です。

VerticalTimelineElement Props

  • Name
    className
    Type
    Customization
    Description
    • ルートのdiv要素に追加するクラス名を指定します。
  • Name
    contentArrowStyle
    Type
    Customization
    Description
    • コンテンツの矢印のdiv要素に追加のスタイルを指定します。
  • Name
    contentStyle
    Type
    Customization
    Description
    • コンテンツのdiv要素に追加のスタイルを指定します。
  • Name
    date
    Type
    Customization
    Description
    • 要素の日付です。
  • Name
    dateClassName
    Type
    Customization
    Description
    • 要素の日付に追加のクラス名を指定します。
  • Name
    icon
    Type
    Customization
    Description
    • 要素のアイコンです。
  • Name
    iconClassName
    Type
    Customization
    Description
    • 要素のアイコンに追加のクラス名を指定します。
  • Name
    iconOnClick
    Type
    Customization
    Description
    • 要素のアイコンのonClickハンドラです。
  • Name
    iconStyle
    Type
    Customization
    Description
    • 要素のアイコンのスタイルです。
  • Name
    position
    Type
    Customization
    Description
    • 要素の位置(左または右)です。
  • Name
    style
    Type
    Customization
    Description
    • ルートのdiv要素に追加のスタイルを指定します。
  • Name
    textClassName
    Type
    Customization
    Description
    • テキストのコンテナに追加のクラス名を指定します。

Customization

    <VerticalTimeline>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
            date="2011 - present"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Creative Director</h3>
            <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
            <p>
            Creative Direction, User Experience, Visual Design, Project Management, Team Leading
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            date="2010 - 2011"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Art Director</h3>
            <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
            <p>
            Creative Direction, User Experience, Visual Design, SEO, Online Marketing
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            date="2008 - 2010"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Web Designer</h3>
            <h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
            <p>
            User Experience, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--work"
            date="2006 - 2008"
            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
            icon={<WorkIcon />}
        >
            <h3 className="vertical-timeline-element-title">Web Designer</h3>
            <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
            <p>
            User Experience, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--education"
            date="April 2013"
            iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
            icon={<SchoolIcon />}
        >
            <h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
            <h4 className="vertical-timeline-element-subtitle">Online Course</h4>
            <p>
            Strategy, Social Media
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--education"
            date="November 2012"
            iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
            icon={<SchoolIcon />}
        >
            <h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
            <h4 className="vertical-timeline-element-subtitle">Certification</h4>
            <p>
            Creative Direction, User Experience, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            className="vertical-timeline-element--education"
            date="2002 - 2006"
            iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
            icon={<SchoolIcon />}
        >
            <h3 className="vertical-timeline-element-title">Bachelor of Science in Interactive Digital Media Visual Imaging</h3>
            <h4 className="vertical-timeline-element-subtitle">Bachelor Degree</h4>
            <p>
            Creative Direction, Visual Design
            </p>
        </VerticalTimelineElement>
        <VerticalTimelineElement
            iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
            icon={<StarIcon />}
        />
</VerticalTimeline>

Example

react-vertical-timeline-componentを使用して、時間順のイベントの視覚的なタイムラインを作成します。VerticalTimelineとVerticalTimelineElementは、このライブラリの主要なコンポーネントです。

Additional Explanation

  • Name
    VerticalTimeline
    Type
    Example
    Description

    タイムラインのコンテナとしての役割を果たします。ここでは、layoutプロパティを使用してタイムラインのレイアウトを '1-column-left'に設定しました。また、lineColorプロパティを使用してタイムラインの色を設定しました。

  • Name
    VerticalTimelineElement
    Type
    Example
    Description

    タイムラインイベントを表す要素です。以下のような主なプロパティが使用されています。

    • className: CSSクラスを追加します。ここでは 'vertical-timeline-element--work'を使用しました。
    • contentStyleおよびcontentArrowStyle: イベントのコンテンツボックスと矢印のスタイルを設定します。背景色とテキストの色を変更しました。
    • date: イベントの日付を示します。
    • iconStyleおよびicon: アイコンのスタイルと表示するアイコンを設定します。ここでは、react-icons/faライブラリからアイコンを取得しました。

コンポーネントは、それぞれの VerticalTimelineElement で構成されたイベントを視覚的に表示します。各要素には、日付、タイトル、サブタイトル、および説明が含まれており、アイコンやコンテンツのスタイルをカスタマイズすることができます。これにより、ユーザーはイベントが発生した時刻と詳細を一目で把握することができます。

このように、react-vertical-timeline-component はウェブサイトで時間順のイベントや情報を視覚的に表現したい場合に非常に便利です。

/components/Timeline.jsx

import React from 'react'

import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'
import 'react-vertical-timeline-component/style.min.css'
import { FaAws, FaYoutube, FaDiscord } from 'react-icons/fa6'

function Timeline() {
    return (
        <div>
            <VerticalTimeline layout="1-column-left" lineColor="#FFFFFF">
                <VerticalTimelineElement className="vertical-timeline-element--work"
                    contentStyle={{ background: '#FF0000', color: '#FFFFFF' }}
                    contentArrowStyle={{ borderRight: '7px solid  #FF0000' }}
                    date="2020년 10월"
                    iconStyle={{ background: '#FF0000', color: '#FFFFFF' }}
                    icon={<FaYoutube />} >
                    <h3 className="vertical-timeline-element-title"> Youtube 챌린저 리플레이 서비스 시작 </h3>
                    <h4 className="vertical-timeline-element-subtitle"> cptkuk91, xodud3008 </h4>
                    <p>챌린저 리플레이 동영상 서비스를 시작</p>
                </VerticalTimelineElement>
            // 이하 생략...
            </VerticalTimeline>
        </div>
    )
}
export default Timeline