0.3.0 • Published 6 years ago

react-dual-timeline v0.3.0

Weekly downloads
14
License
MIT
Repository
github
Last release
6 years ago

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).

namedefault valuedescription
paddingTop50
mediaWidthMed900
mediaWidthSmall700
activeColor#F45B69
colorblack
twoSidedOverlap80negative overlap between items if two-sided
animationstrue
addEvenPropToChildrenfalse
lineColor#FFF
circleWidth30
paddingToItem30
paddingToItemSmall20
lineWidth5
triangleWidth16
triangleHeight8
itemWidth350
itemWidthMed250
offsetHidden200
triangleOffset7
smallItemWidthPadding50
itemPadding16
evenItemOffset0important when using bootstrap.css
0.3.0

6 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago