#React Image Timeline
An image-centric timeline component for React.js. View chronological events in a pleasant way.
####Features
- Responsive & mobile-friendly
- Easily customized
- Gracefully handles overflow and non-uniform content
- Lightweight (only CSS and SVG)
####View Example
http://aaron9000.github.io/react-image-timeline/
####Add to Existing Project
npm install moment --save
if needednpm install ramda --save
if needednpm install react-image-timeline --save
####Usage
import ReactDOM from 'react-dom';
import Timeline from 'react-image-timeline';
const events = require('events.json');
require('react-image-timeline/dist/timeline.css');
ReactDOM.render(<Timeline events={events} />, document.getElementById('root'));
Sample Data
####Props
events
: array (required)
date
: date (required)title
: string (required)imageUrl
: string (required)text
: string (required)onClick
: functionbuttonText
: stringextras
: object
reverseOrder
: booleancustomStartLabel
: componentcustomEndLabel
: componentcustomHeader
: componentcustomImageBody
: componentcustomTextBody
: componentcustomFooter
: component
####Custom Event Data
To pass extra data into custom components, use the extras
field on the event
model.
####Custom Styles
To customize the timeline styles, add CSS to override timeline.css.
####Custom Dot Pattern
The dots are defined in CSS using a base64-encoded image. Encode a new image and override the corresponding CSS class.
####Custom Components
For more advanced customization, you can pass in custom components to replace the defaults. Custom components will be passed an event
model in props.
const CustomHeader = (props) => {
const {title, extras} = props.event;
const {customField} = extras;
return <div className="custom-header">
<h1>{title}</h1>
<p>{customField}</p>
</div>;
};
ReactDOM.render(<Timeline events={events} customHeader={CustomHeader}/>, document.getElementById('root'));
####Run Example Project
npm install
npm run example
Then, visit localhost:3000/example in your browser.
####Run Tests
npm run test
####Screenshot