React Image Timeline
An image-centric timeline component for React.js. View chronological events in a pleasant way.
Updated for React 16
Features
- Responsive & mobile-friendly
- Easily customized
- Lightweight (only CSS and SVG)
- Only 20kb
- Zero extra dependencies
View Live Example
http://aaron9000.github.io/react-image-timeline/
Add to Existing Project
npm install react-image-timeline --save
Usage
import ReactDOM from 'react-dom';
import Timeline from 'react-image-timeline';
require('react-image-timeline/dist/timeline.css');
ReactDOM.render(<Timeline events={events} />, document.getElementById('root'));
Props
Key | Type | Required |
---|
events | array of "Event" | required |
reverseOrder | boolean | |
customStartLabel | component | |
customEndLabel | component | |
customHeader | component | |
customImageBody | component | |
customTextBody | component | |
customFooter | component | |
Event
Key | Type | Required |
---|
date | date | required |
title | string | required |
imageUrl | string | required |
text | string | required |
onClick | function | |
buttonText | string | |
extras | object | |
or
{
date: Date.parse("2013-09-27"),
text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
title: "Cairo, Egypt",
imageUrl: "http://github.com/aaron9000/react-image-timeline/src/assets/egypt.jpg"
}
Customization
Event Metadata
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'));
Scripts
Run Example Project
*clone repository*
npm install
npm run start
Run Tests
npm run test