Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rcdexta/react-event-timeline
A responsive event timeline in React.js
https://github.com/rcdexta/react-event-timeline
react react-component reactjs storybook timeline widget
Last synced: 5 days ago
JSON representation
A responsive event timeline in React.js
- Host: GitHub
- URL: https://github.com/rcdexta/react-event-timeline
- Owner: rcdexta
- License: mit
- Created: 2016-10-16T11:18:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-01-29T16:52:32.000Z (about 5 years ago)
- Last Synced: 2025-02-08T05:09:42.099Z (12 days ago)
- Topics: react, react-component, reactjs, storybook, timeline, widget
- Language: JavaScript
- Homepage: https://rcdexta.com/react-event-timeline
- Size: 3.54 MB
- Stars: 536
- Watchers: 13
- Forks: 57
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-event-timeline
React component to generate a responsive vertical event timeline
[](https://badge.fury.io/js/react-event-timeline)
[](https://travis-ci.org/rcdexta/react-event-timeline)
[](https://codecov.io/gh/rcdexta/react-event-timeline)
[](https://github.com/rcdexta/react-event-timeline/blob/master/LICENSE.md)
Storybook demos here: https://rcdexta.github.io/react-event-timeline
CodeSandbox version to play with examples (in typescript):
[](https://codesandbox.io/s/13k1jjqj64)
> 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
```
or if you use `yarn`
```
yarn add react-event-timeline
```
## Usage
The following snippet generates the timeline you see in the screenshot:
```jsx
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](https://github.com/rcdexta/react-event-timeline/blob/master/stories/App.story.js) 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` or `left`. Default: `left` |
| lineColor | string | CSS color code to override the line color |
| lineStyle | string | Override the appearance of line with custom css styling |
### TimelineEvent
Each event in the timeline will be represented by the `TimelineEvent` component. There can be multiple repeating instances of this component inside `Timeline` wrapper
| 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` will render event as a Card |
| style | object | Override style for the entire event container. Can be used to modify card appearance if container is selected as `card` |
| titleStyle | object | Override style for the title content |
| subtitleStyle | object | Override style for the subtitle content |
| cardHeaderStyle | object | Override style for the card header if container is `card` |
| collapsible | boolean | Make the timeline event collapse body content |
| showContent | boolean | if `collapsible` is true, should content be shown by default. `false` is default value |
### 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](https://github.com/kadirahq/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` folder. Run `npm run storybook` and you should see your code changes hot reloaded on the browser
Also use [semantic-release](https://github.com/semantic-release/semantic-release) to automate release to npm. Use `npm run commit` to commit your changes and raise a PR.
# Acknowledgements
This project is graciously supported by IDE tools offered by [JetBrains](https://www.jetbrains.com/) for development.
[](https://www.jetbrains.com/)
## License
MIT