Skip to content

endosama/react-dual-timeline

 
 

Repository files navigation

Build Status npm version

React Timeline

A react component for animated timelines.

screen capture

Based on the CSS and Javascript template by George Martsoukos (CodePen).

Usage

For a full example see example/index.js.

Requirements: radium

import Timeline from 'timeline'

render(
  <StyleRoot>
    <Timeline>
      <div>Arbitrary entry</div>
      <div icon='x'>Arbitrary entry</div>
    </Timeline>
  </StyleRoot>
)

A custom icon can (optionally) be provided for each entry.

Configuration

src/config.js holds the default configuration.

Alternative values can be passed to the <Timeline> component, e.g. <Timeline animations={false} to disable animations (far more efficient, as otherwise boundingRect of every entry is checked on every scroll event).

name default value description
paddingTop 50
mediaWidthMed 900
mediaWidthSmall 700
activeColor #F45B69
lineStepColor #F45B69
lineStepShape circle square
color black
twoSidedOverlap 80 negative overlap between items if two-sided
animations true
addEvenPropToChildren false
lineColor #FFF
circleWidth 30
paddingToItem 30
paddingToItemSmall 20
lineWidth 5
triangleWidth 16
triangleHeight 8
itemWidth 350
itemWidthMed 250
offsetHidden 200
triangleOffset 7
smallItemWidthPadding 50
itemPadding 16
evenItemOffset 0 important when using bootstrap.css

About

A react component for animated timelines.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.9%
  • HTML 3.1%