react-vertical-timeline-component

This component is used to list events, development history, project history, company milestones, and more in chronological order on a website or web application.

Features

  1. Easy to reuse, expand, and maintain.

  2. It allows dynamic content updates based on user input or external data.


Installation

To install react-vertical-timeline-component, you can use npm or yarn. This package allows you to easily add a vertical timeline to the desired component in your React project.

Cautions

"React must already be installed in your project. Therefore, if you haven't started a React project yet, you need to first create a project using create-react-app."

  • Name
    Update Check
    Type
    Cautions
    Description

    Always check for updates of the package and, if there are any, consider updating the package or applying the changes to your project as needed.

Installation

npm i react-vertical-timeline-component

Usage

First, import the package, and then you need to create instances of the VerticalTimeline and VerticalTimelineElement components.

  • Name
    VerticalTimeline Component
    Type
    Usage
    Description

    Use the VerticalTimeline component to create the timeline. This component serves as the skeleton of the timeline.

  • Name
    VerticalTimelineElement Component
    Type
    Usage
    Description

    Use the VerticalTimelineElement component to create each timeline element. This component represents individual items in the timeline, including date, title, and subtext.

Cautions

  • Name
    CSS
    Type
    Cautions
    Description

    This component uses the CSS-in-JS approach, so if you want to apply custom styles, you need to override the package's default styles.

  • Name
    React 버전
    Type
    Cautions
    Description

    Since this package is used in a React project, make sure that your React version is compatible with this package.

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 is a useful React component for creating responsive vertical timeline components. Here is an explanation of how to customize this component.

Explanation

VerticalTimeline Props

  • Name
    animate
    Type
    Customization
    Description
    • Enables or disables animation for the elements.
    • The default value is true.
  • Name
    className
    Type
    Customization
    Description
    • Adds additional class names to the root div element.
  • Name
    layout
    Type
    Customization
    Description
    • Choose between '1-column-left', '1-column-right', or '2-columns'.
    • The default value is '2-columns'.
  • Name
    lineColor
    Type
    Customization
    Description
    • Selects the color of the timeline.
    • The default value is 'white'.

VerticalTimelineElement Props

  • Name
    className
    Type
    Customization
    Description
    • Adds additional class names to the root div element.
  • Name
    contentArrowStyle
    Type
    Customization
    Description
    • Adds additional styles to the content arrow div element.
  • Name
    contentStyle
    Type
    Customization
    Description
    • Adds additional styles to the content div element.
  • Name
    date
    Type
    Customization
    Description
    • The date of the element.
  • Name
    dateClassName
    Type
    Customization
    Description
    • Adds additional class names to the date of the element.
  • Name
    icon
    Type
    Customization
    Description
    • The icon of the element.
  • Name
    iconClassName
    Type
    Customization
    Description
    • Adds additional class names to the icon of the element.
  • Name
    iconOnClick
    Type
    Customization
    Description
    • onClick handler for the icon of the element.
  • Name
    iconStyle
    Type
    Customization
    Description
    • The style of the icon of the element.
  • Name
    position
    Type
    Customization
    Description
    • The position of the element (left or right).
  • Name
    style
    Type
    Customization
    Description
    • Adds additional styles to the root div element.
  • Name
    textClassName
    Type
    Customization
    Description
    • Adds additional class names to the text container.

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

Use react-vertical-timeline-component to create a visual timeline of events in chronological order. The main components of this library are VerticalTimeline and VerticalTimelineElement.

Additional Explanation

  • Name
    VerticalTimeline
    Type
    Example
    Description

    Serves as the container for the timeline. In this example, the layout prop is set to '1-column-left' to define the layout of the timeline, and the lineColor prop is used to set the color of the timeline.

  • Name
    VerticalTimelineElement
    Type
    Example
    Description

    Represents an element in the timeline. The following key props are used.

    • className: Adds CSS classes. In this example, 'vertical-timeline-element--work' is used.
    • contentStyle and contentArrowStyle: Define the styles of the content box and arrow. Here, the background color and text color are customized.
    • date: Represents the date of the event.
    • iconStyle and icon: Set the style and icon to display. Here, an icon from the react-icons/fa library is used.

The components visually display events using individual VerticalTimelineElement components. Each element includes a date, title, subtitle, and description. Users can customize the icon and style of the content. This allows users to quickly grasp the time and details of each event.

In this way, react-vertical-timeline-component is highly useful for visually representing events or information in chronological order on a website.

/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"> Start Youtube </h3>
          <h4 className="vertical-timeline-element-subtitle">
            {' '}
            cptkuk91, xodud3008{' '}
          </h4>
          <p>Service League of Legends Challenger Replays</p>
        </VerticalTimelineElement>
        // 이하 생략...
      </VerticalTimeline>
    </div>
  )
}
export default Timeline