Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vertical-timeline-component-react with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var verticalTimelineComponentReact = require("vertical-timeline-component-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vertical-timeline-component-react v2.0.3

A simple component for create a vertical timeline with Reactjs

vertical-timeline-component-react

A simple component to generate a responsive vertical timeline Vertical Timeline Component React

Status

Coverage Status Version Build Status Dependencies devDependencies Status peerDependencies Status

Getting started

To install as npm dependency

npm install --save vertical-timeline-component-react

API Documentation

Timeline

This is the wrapper component that creates the vertical timeline.

  • Childrens
Number of childrenRequiredValue Allowed
ManyAt least the first Container component is requiredOnly Container components
  • Props
nameTypeRequiredValues Alloweddefault valuesDescription
themeobjectfalsecolors{ yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" }Set colors in all components
langnodefalseen or esenChange the language from and to texts and change the format in the dates
dateFormatstringfalseL, l or llLChange the presentation format of dates

dateFormat: Receive only one of three options. (The options are same the moment.js using).

  • The option L will return a date like MM/DD/YYYY (in english) or DD/MM/YYYY (in spanish).
  • The option l will return a date like M/D/YYYY (in english) or D/M/YYYY (in spanish).
  • The option ll will return a date like MMM DD, YYYY (in english) or DD de MMM, YYYY (in spanish).

Container

Each event in the timeline will be represented by the Content component. This component receive only two children's, the first is YearContent and the second is BodyContent. There can be multiple repeating instances of this component inside Timeline wrapper.

  • Childrens
Number of childrenRequiredValue Allowed
2trueYearContent and BodyContent

YearContent

For each Container you need YearContent (like firts children) since with this component you mark the events in the given year.

  • Props
NameTypeRequiredValues Alloweddefault valuesDescription
startDatestringtrueYYYY/MM/DD - YYYY/MM - YYYYdoes not applyThe date of the start of the content or contents
endDatestringfalseYYYY/MM/DD - YYYY/MM - YYYYdoes not applyThe date of the end of the content or contents
currentYearbooleanfalsetrue or falsecurrent yearThe value is the current year, it is recommended to use it in the last Container

BodyContent

For each Container you need ContentBody (like second children). This component will be the container of the one or more Sections.

  • Childrens
Number of childrenRequiredValue Allowed
ManyAt least the first Section component is requiredOnly Section components

Section

This component is the container for one or more Description.

  • Childrens
Number of childrenRequiredValue Allowed
ManyAt least the first Description component is requiredOnly Description components
  • Props
NameTypeRequiredDescription
titlestringtrueIt's the title of any section

Description

This component can be the text of the description or a subtitle

  • Props
NameTypeRequiredValues Alloweddefault valuesDescription
variantstringfalsesubtitle or descriptiondescriptionTransform the format of the text
textstringtrueAny textdoes not applyShow the description of the Section

How to use it

The following snippet will show you how to use the library:

Using class components:

import {
 Timeline,
 Container,
 YearContent,
 BodyContent,
 Section,
 Description,
} from 'vertical-timeline-component-react';

const customTheme = {
 yearColor: '#405b73',
 lineColor: '#d0cdc4',
 dotColor: '#262626',
 borderDotColor: '#d0cdc4',
 titleColor: '#405b73',
 subtitleColor: '#bf9765',
 textColor: '#262626',
};

class Main extends Component {
 render() {
  retrurn(
   <Timeline theme={customTheme} dateFormat='ll'>
    <Container>
     <YearContent startDate='2020/07/01' currentYear />
     <BodyContent>
      <Section title='Title'>
       <Description variant='subtitle' text='Subtitle' />
       <Description text='Description' />
       <Description text='Another description' />
      </Section>

      <Section title='Another title'>
       <Description text='Description' />
       <Description text='Another description' />
      </Section>
     </BodyContent>
    </Container>
   </Timeline>,
  );
 }
}

Using function components:

import {
 Timeline,
 Container,
 YearContent,
 BodyContent,
 Section,
 Description,
} from 'vertical-timeline-component-react';

const Main = () => {
 const customTheme = {
  yearColor: '#405b73',
  lineColor: '#d0cdc4',
  dotColor: '#262626',
  borderDotColor: '#d0cdc4',
  titleColor: '#405b73',
  subtitleColor: '#bf9765',
  textColor: '#262626',
 };

 return (
  <Timeline theme={customTheme} dateFormat='ll'>
   <Container>
    <YearContent startDate='2020/07/01' currentYear />
    <BodyContent>
     <Section title='Title'>
      <Description variant='subtitle' text='Subtitle' />
      <Description text='Description' />
      <Description text='Another description' />
     </Section>

     <Section title='Another title'>
      <Description text='Description' />
      <Description text='Another description' />
     </Section>
    </BodyContent>
   </Container>
  </Timeline>
 );
};

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free