DOCSEARCHbyAlgolia
Submit Docs

react-vertical-timeline-component

repository·master·Indexed 22 days ago

https://github.com/stephane-monnot/react-vertical-timeline

A React component library for creating animated vertical timelines. It provides the VerticalTimeline container and VerticalTimelineElement components, supporting 1-column and 2-column layouts with customizable icons, dates, and styles.

Tokens
1.6K
Snippets
5
Records
5
Agent score
28%

What's inside react-vertical-timeline-component

  2. Basic Usage of VerticalTimeline and VerticalTimelineElement

    master

    To use the library, import VerticalTimeline and VerticalTimelineElement from react-vertical-timeline-component. You must also import the provided CSS file for the styles to apply correctly.

    Wrap your timeline elements in the <VerticalTimeline> component. Each individual entry is defined by a <VerticalTimelineElement> component, which accepts props for dates, icons, and custom styling.

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

// ... inside your component
<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>
</VerticalTimeline>

  3. VerticalTimelineElement Props Reference

    master

    The <VerticalTimelineElement> component accepts the following props to configure individual timeline entries:

    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: 'small', 'medium', 'large'.
iconClick={ 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 passed to `useInView` (default: { rootMargin: '0px 0px 40px 0px' }).
visible={ Boolean }                   - Show element by default even if it is outside of the viewport (default: false).

  4. VerticalTimeline Props Reference

    master

    The <VerticalTimeline> component accepts the following props to configure the overall timeline container:

    animate={ Boolean }          - Enable or disable animations on elements (default: true).
className={ String }        - Add extra class name to root div element.
layout={ String }            - Choose layout: '1-column-left', '1-column-right', or '2-columns' (default: '2-columns').
lineColor={ String }         - Choose a color for the timeline (default: 'white').

  5. Import VerticalTimeline and VerticalTimelineElement

    master

    The react-vertical-timeline-component package exports two primary components used to build a vertical timeline: VerticalTimeline (the container) and VerticalTimelineElement (the individual timeline items).

    import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';