!React 19 Supported

 

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

!alt tag

Full documentation & Demo

React Vertical Timeline documentation

Install

``code
$ npm i react-vertical-timeline-component
`




Usage

`code|lang-jsx
---
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

...


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={}
>


Creative Director

Miami, FL

Creative Direction, User Experience, Visual Design, Project Management, Team Leading

className="vertical-timeline-element--work"
date="2010 - 2011"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={}
>

Art Director

San Francisco, CA

Creative Direction, User Experience, Visual Design, SEO, Online Marketing

className="vertical-timeline-element--work"
date="2008 - 2010"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={}
>

Web Designer

Los Angeles, CA

User Experience, Visual Design

className="vertical-timeline-element--work"
date="2006 - 2008"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={}
>

Web Designer

San Francisco, CA

User Experience, Visual Design

className="vertical-timeline-element--education"
date="April 2013"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
icon={}
>

Content Marketing for Web, Mobile and Social Media

Online Course

Strategy, Social Media

className="vertical-timeline-element--education"
date="November 2012"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
icon={}
>

Agile Development Scrum Master

Certification

Creative Direction, User Experience, Visual Design

className="vertical-timeline-element--education"
date="2002 - 2006"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
icon={}
>

Bachelor of Science in Interactive Digital Media Visual Imaging

Bachelor Degree

Creative Direction, Visual Design

iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
icon={}
/>

`

VerticalTimeline Props

$3

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

$3

Add extra class name to root div element.

$3

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

$3

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

VerticalTimelineElement Props

$3

Add extra class name to root div element.

$3

Add extra style to content arrow div element.

$3

Add extra style to content div element.

$3

Date of the element.

$3

Add extra class name to the element's date.

$3

Icon of the element.

$3

Add extra class name to the element's icon.

$3

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

$3

onClick handler of the element's icon.

$3

onClick handler of the vertical timeline element's div.

$3

Style of the element's icon.

$3

Position of the element (left or right).

$3

Add extra style to root div element.

$3

Add extra class name to the text container.

$3

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

$3

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




Showcase

* My resume (Stéphane Monnot).




For development

$3

`code
$ npm start
`

$3


`code
$ npm test
`

$3

`code
$ npm test -- --watch
`

$3

`code
$ npm run lint
`

$3

`code
$ npm run dist
`

$3

`code
$ npm publish
``

License

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