react-event-timeline

React component to generate a responsive vertical event timeline

Storybook demos here: https://rcdexta.github.io/react-event-timeline

CodeSandbox version to play with examples (in typescript):

Note: CodeSandbox version has predefined styles and icons loaded in index.html for better presentation!

Features

• Is lightweight
• Responsive and extensible
• Configurable and customizable

Getting started

To install as npm dependency

npm install --save react-event-timeline

yarn

yarn add react-event-timeline

Usage

The following snippet generates the timeline you see in the screenshot:

import {Timeline, TimelineEvent} from 'react-event-timeline'

ReactDOM.render(
    
            textsms}
            >
                I received the payment for $543. Should be shipping the item within a couple of hours.
            
            email}
            >
                Like we talked, you said that you would share the shipment details? This is an urgent order and so I
                    am losing patience. Can you expedite the process and pls do share the details asap. Consider this a
                    gentle reminder if you are on track already!
            
    ,
      document.getElementById('container')
);

Please refer storybook to check code for all the examples in the storybook demo.

API Documentation

Timeline

This is the wrapper component that creates the infinite vertical timeline

| Name | Type | Description | | -------------- | ------ | ---------------------------------------- | | className | string | The css class name of timeline container| | style | object | Override inline styles of timeline container | | orientation | string | Display the timeline on

right

left

left

TimelineEvent

Each event in the timeline will be represented by the

TimelineEvent

Timeline

| Name | Type | Description | | ------------ | ------ | ---------------------------------------- | | title | node | The title of the event. Can be string or any DOM element node(s) | | createdAt | node | The time at which the event occurred. Can be datetime string or any DOM element node(s) | | subtitle | node | If you prefer having the title at the top and some caption below, omit createdAt and specify title and subtitle | | icon | node | The icon to show as event lable. Can be a SVG or font icon | | iconStyle | object | Custom CSS styling for the icon | | bubbleStyle | object | Custom CSS styling for the bubble containing the icon | | buttons | node | Action buttons to display to the right of the event content | | contentStyle | node | Override content style | | container | string | Optional value

card

card

card

collapsible

false

TimelineBlip

Use this component if your event footprint is too small and can be described in a single line

| Name | Type | Description | | --------- | ------ | ---------------------------------------- | | title | node | The title of the event. Can be string or any DOM element node(s) | | icon | node | The icon to show as event label. Can be a SVG or font icon | | iconColor | string | CSS color code for icon | | iconStyle | object | Custom CSS styling for the icon | | style | object | Override style for the entire event container |

Refer to Condensed Timeline in Storybook for examples of using this component.

Development

This project recommends using react-storybook as a UI component development environment. Use the following scripts for your development workflow:

1. npm run storybook

   : Start developing by using storybook

2. npm run lint

   : Lint all js files

3. npm run lintfix

   : fix linting errors of all js files

4. npm run build

   : transpile all ES6 component files into ES5(commonjs) and put it in

   dist

   directory

5. npm run docs

   : create static build of storybook in

   docs

   directory that can be used for github pages

The storybook artefacts can be found in

stories

npm run storybook

Also use semantic-release to automate release to npm. Use

npm run commit

Acknowledgements

This project is graciously supported by IDE tools offered by JetBrains for development.

License

MIT