react-event-feed
A react component to generate a responsive event-timeline
See the storybook demo here: https://rcdexta.github.io/react-event-timeline
Features
- It's lightweight
- Responsive and extensible
Getting started
npm install --save react-event-timeline
or if you are using yarn
yarn add react-event-timeline
Usage
The following snippet generates the timeline you see in the demo:
import Timeline TimelineEvent from '../components/index' ReactDOM
Please refer to story description to check out code for all the examples in the storybook
API Documentation
Timeline
This is the wrapper component that creates the infinite vertical timeline
Name | Type | Description |
---|---|---|
className | string | The css class name of the root timeline element |
style | object | Override the inline styles of the timeline element |
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) |
subtitle | node | A subtitle for the event, Can be datetime string or any DOM element node(s) |
icon | node | The icon to show as event label. Can be a SVG or font icon |
buttons | node | Action buttons to display to the right of the event content |
card | bool | Will render event as a Card |
style | node | Override style for the entire event container |
containerStyle | object | Override the inner container style |
contentStyle | node | Override content style |
iconStyle | object | Override icon style |
Development
This project recommends using react-storybook as a UI component development environment. Use the following scripts for your development workflow:
yarn storybook
: Start developing by using storybookyarn lint
: Lint all js filesyarn lintfix
: fix linting errors of all js filesyarn build
: transpile all ES6 component files into ES5(commonjs) and put it indist
directoryyarn docs
: create static build of storybook indocs
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 live reloaded on the browser
Also use semantic-release to automate release to npm. Use npm run commit
to commit your changes and then npm run semantic-release
to automate deployment and publishing to npm repository.
License
MIT