Giter VIP home page Giter VIP logo

react-event-timeline's Introduction

#react-event-timeline

A react component to generate a responsive event-timeline

Build Status semantic-release js-standard-style Commitizen friendly

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

Usage

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

import {Timeline, TimelineEvent} from '../components/index'

ReactDOM.render(
    <Timeline>
            <TimelineEvent title="John Doe sent a SMS"
                           createdAt="2016-09-12 10:06 PM"
                           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="You sent an email to John Doe"
                createdAt="2016-09-11 09:06 AM"
                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)
createdAt node The time at which the event occurred. Can be datetime string or any DOM element node(s)
icon node The icon to show as event lable. Can be a SVG or font icon
iconColor string CSS color code for icon
buttons node Action buttons to display to the right of the event content

License

MIT

react-event-timeline's People

Contributors

rcdexta avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.