Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

react-image-timeline

Package Overview
Dependencies
0
Maintainers
1
Versions
44
Issues
File Explorer

Advanced tools

react-image-timeline

An image-centric timeline component for React.js. View chronological events in a pleasant way.

    3.2.13latest
    GitHub

Version published
Maintainers
1
Weekly downloads
847
increased by13.39%

Weekly downloads

Readme

Source

CircleCI

React Image Timeline

An image-centric timeline component for React.js. View chronological events in a pleasant way.

View Sample Timeline

Features:

  • Responsive layout
  • Graceful handling of non-uniform content
  • Customizable (use your own CSS and components)
  • Memoized, pure, & typed (Typescript definitions included)
  • Only 32kb
  • Zero extra dependencies

screenshot

How to Use

npm install react-image-timeline --save

import React from 'react'; import ReactDOM from 'react-dom'; import Timeline from 'react-image-timeline'; require('react-image-timeline/dist/timeline.css'); // .scss also available const events = [ { date: new Date(2013, 9, 27), text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.", title: "Cairo, Egypt", buttonText: 'Click Me', imageUrl: "http://github.com/aaron9000/react-image-timeline/blob/master/src/assets/cairo.jpg?raw=true", onClick: console.log, } ]; ReactDOM.render(<Timeline events={events} />, document.getElementById('root'));

Customization

Custom Styles

To customize the timeline, add your own CSS to override the default styles.

Event Metadata

To pass extra data into custom components, use extras on TimelineEvent.

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 a TimelineEvent 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} customComponents={{header: CustomHeader}}/>, document.getElementById('root'));
Run Example Project (you will need create-react-app to run)
*install create-react-app* *clone repository* yarn yarn --debug yarn start
Run Tests
*clone repository* yarn test

TypeScript & Models

Typescript definitions are included in the library.


Importing TypeScript Definitions
import { TimelineProps, TimelineEventProps, TimelineEvent, TimelineCustomComponents } from 'react-image-timeline';
TimelineProps
export interface TimelineProps { customComponents?: TimelineCustomComponents | null; events: Array<TimelineEvent>; reverseOrder?: boolean; denseLayout?: boolean; }
KeyTypeRequired?
eventsArrayYes
customComponentsTimelineCustomComponents
reverseOrderboolean
denseLayoutboolean

TimelineCustomComponents
export interface TimelineCustomComponents { topLabel?: React.PureComponent<TimelineEventProps> | React.ReactNode | null; bottomLabel?: React.PureComponent<TimelineEventProps> | React.ReactNode | null; header?: React.PureComponent<TimelineEventProps> | React.ReactNode | null; imageBody?: React.PureComponent<TimelineEventProps> | React.ReactNode | null; textBody?: React.PureComponent<TimelineEventProps> | React.ReactNode | null; footer?: React.PureComponent<TimelineEventProps> | React.ReactNode | null; }
KeyTypeRequired?
topLabelcomponent
bottomLabelcomponent
headercomponent
imageBodycomponent
textBodycomponent
footercomponent

TimelineEventProps
export interface TimelineEventProps { event: TimelineEvent; }
KeyTypeRequired?
eventTimelineEventYes

TimelineEvent
export interface TimelineEvent { date: Date; title: string; imageUrl: string; text: string; onClick?: TimelineEventClickHandler | null; buttonText?: string | null; extras?: object | null; }
KeyTypeRequired?
datedateYes
titlestringYes
imageUrlstringYes
textstringYes
onClickfunction
buttonTextstring
extrasobject

Keywords

FAQs

Last updated on 25 May 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc