• Stars
    star
    912
  • Rank 50,097 (Top 1.0 %)
  • Language
    CSS
  • License
    MIT License
  • Created about 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vertical timeline for React.js

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.