react-image-timeline

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/

Screenshot

Add to Existing Project

• npm install moment --save if needed
• npm install ramda --save if needed
• 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'));

Sample Data

View Sample Data

Props

Key	Type	Required
events	array	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

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.

// A custom header to replace the default
const CustomHeader = (props) => {

    // The corresponding "event" model
    const {title, extras} = props.event;
    
    // Custom data payload
    const {customField} = extras;

    // Use your own CSS
    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