Convert Figma logo to code with AI

stephane-monnot logoreact-vertical-timeline

Vertical timeline for React.js

1,080
157
1,080
39
View on GitHubView on NPM

Top Related Projects

prabhuignoto's avatar

react-chrono

3,902

🕑 Modern Timeline Component for React

Quick Overview

React-vertical-timeline is a React component library that allows developers to create responsive vertical timelines easily. It provides a customizable and visually appealing way to display chronological events or milestones in a vertical format, making it ideal for portfolios, project histories, or biographical information.

Pros

  • Easy to integrate with existing React projects
  • Highly customizable with various styling options
  • Responsive design that adapts to different screen sizes
  • Supports both left and right-aligned timeline items

Cons

  • Limited animation options out of the box
  • Lack of built-in support for horizontal timelines
  • Documentation could be more comprehensive
  • No TypeScript definitions included

Code Examples

  1. Basic usage of VerticalTimeline and VerticalTimelineElement:
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

function MyTimeline() {
  return (
    <VerticalTimeline>
      <VerticalTimelineElement
        className="vertical-timeline-element--work"
        date="2021 - present"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
      >
        <h3 className="vertical-timeline-element-title">Web Developer</h3>
        <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
        <p>
          Creative Direction, User Experience, Visual Design, Project Management, Team Leading
        </p>
      </VerticalTimelineElement>
    </VerticalTimeline>
  );
}
  1. Customizing the timeline with different colors and icons:
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import { MdWork, MdSchool } from 'react-icons/md';

function CustomTimeline() {
  return (
    <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={<MdWork />}
      >
        <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--education"
        date="2002 - 2006"
        iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
        icon={<MdSchool />}
      >
        <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>
    </VerticalTimeline>
  );
}
  1. Adding animations to timeline elements:
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';

function AnimatedTimeline() {
  return (
    <VerticalTimeline animate={true}>
      <VerticalTimelineElement
        className="vertical-timeline-element--work"
        date="2010 - 2011"
        animate={true}
        visible={true}
      >
        <h3 className="vertical-timeline-element-title">Art Director</h3>
        <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h

Competitor Comparisons

prabhuignoto logo

react-chrono

3,902

🕑 Modern Timeline Component for React

Pros of react-chrono

  • More layout options: Offers vertical, horizontal, and tree layouts
  • Enhanced customization: Provides more styling options and themes
  • Interactive features: Includes media support and clickable items

Cons of react-chrono

  • Steeper learning curve: More complex API due to additional features
  • Larger bundle size: Increased file size due to more functionality

Code Comparison

react-vertical-timeline:

<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>
  </VerticalTimelineElement>
</VerticalTimeline>

react-chrono:

<Chrono items={items} mode="VERTICAL">
  <div>
    <h3>Custom Component</h3>
    <p>Add any custom component as a child</p>
  </div>
</Chrono>

Both libraries provide React components for creating timelines, but react-chrono offers more flexibility in terms of layout and customization. react-vertical-timeline focuses on a simpler, vertical-only layout, which may be preferable for projects requiring a straightforward timeline implementation. react-chrono's additional features come at the cost of a more complex API and larger bundle size, which might be considerations for smaller projects or those with strict performance requirements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

build status Dependency Status

react-vertical-timeline-component - Vertical timeline for React.js

alt tag

Full documentation & Demo

React Vertical Timeline documentation

Install

$ npm i react-vertical-timeline-component

Usage

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

...

<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>

VerticalTimeline Props

animate={ Boolean }

Enable or disable animations on elements (default: true).

className={ String }

Add extra class name to root div element.

layout={ String }

Choose if you want '1-column-left' or '1-column-right' or '2-columns' (default: '2-columns').

lineColor={ String }

Choose a color for the timeline (default: 'white').

VerticalTimelineElement Props

className={ String }

Add extra class name to root div element.

contentArrowStyle={ Object }

Add extra style to content arrow div element.

contentStyle={ Object }

Add extra style to content div element.

date={ String }

Date of the element.

dateClassName={ String }

Add extra class name to the element's date.

icon={ String }

Icon of the element.

iconClassName={ String }

Add extra class name to the element's icon.

shadowSize={ String }

Shadow size for icon (default: 'small'). Available sizes are 'small', 'medium' and 'large'.

iconOnClick={ Function }

onClick handler of the element's icon.

onTimelineElementClick={ Function }

onClick handler of the vertical timeline element's div.

iconStyle={ Object }

Style of the element's icon.

position={ String }

Position of the element (left or right).

style={ Object }

Add extra style to root div element.

textClassName={ String }

Add extra class name to the text container.

intersectionObserverProps={ Object }

Custom props pass to useInView component (default: { rootMargin: '0px 0px 40px 0px' }). See react-intersection-observer for more information.

visible={ Boolean }

Show element by default even if it is outside of the viewport (default: false).

Showcase

For development

Launch the demo with catalog

$ yarn start

Run the tests

$ yarn test

Watch and Run the tests

$ yarn test:watch

Run lint

$ yarn test:lint

Publish new version (only for maintainers)

$ yarn publish

License

react-vertical-timeline-component is available under MIT. See LICENSE for more details.

NPM DownloadsLast 30 Days