React-event-feed NPM

react-event-feed

A react component to generate a responsive event-timeline

alt tag

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.render(
    <Timeline>
            <TimelineEvent title="2016-09-12 10:06 PM"
                           subtitle="John Doe sent a SMS"
                           icon={<i className="material-icons md-18">textsms</i>}
            >
                I received the payment for $543. Should be shipping the item within a couple of hours.
            </TimelineEvent>
            <TimelineEvent
                title="2016-09-11 09:06 AM"
                subtitle="You sent an email to John Doe"
                icon={<i className="material-icons md-18">email</i>}
            >
                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!
            </TimelineEvent>
    </Timeline>,
      document.getElementById('container')
);

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 storybook
yarn lint : Lint all js files
yarn lintfix : fix linting errors of all js files
yarn build: transpile all ES6 component files into ES5(commonjs) and put it in dist directory
yarn 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 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

react timeline notification

classnames invariant prop-types react react-dom

@infinitebrahmanuniverse/nolb-react-ev @everything-registry/sub-chunk-2553

1.2.5

8 years ago