Ninja Programmers Mindmeld

    react-material-timeline
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.1 • Public • Published

    react-material-timeline

    react-material-timeline is a vertical (right now!) timeline component which can be summarized with a simple equation:

    react-material-timeline = react + material-ui + the code
    

    If you are looking for elegant, simple library to show time based event, this is the perfect candidate!

    Features

    • easy to integrate with material-ui and compatible with material theme
    • lightweight and simple
    • optional Typescript mappings

    Demo

    https://react-material-timeline.stackblitz.io

    Instalation

    Prerequisites

    react-material-timeline uses material-ui library. It means you should have configured material-ui before you start. For more information look here: https://material-ui.com/getting-started/installation/

    Install package

    yarn add react-material-timeline
    

    or

    npm install react-material-timeline
    

    Usage

    1. Import.
    2. Prepare events
    3. Feed Timeline
    4. Have fun.
    import { Timeline } from 'react-material-timeline';
    import { Avatar, Icon } from '@material-ui/core';
     
    const icon =
     
    const events = [
      {
        title: 'Event 1',
        subheader: new Date().toDateString(),
        description: [ 'Some description for event 1' ],
        icon: <Avatar><Icon>work</Icon></Avatar>,
      },
      {
        title: 'Event 2',
        subheader: new Date().toDateString(),
        description: [ 'Some description for event 2' ],
        icon: <Avatar><Icon>home</Icon></Avatar>,
      }
    ];
     
    class AwesomeTimeline extends Component {
      render() {
        return <Timeline events={events}/>;
      }
    }

    Custtomisation

    It is possible to inject CSS styles for cards via styles property:

    // make text in timeline right cards to be aligned to the right
    <Timeline events={events} styles={{ rightCard: { textAlign: 'right' } }} />

    Currently, it is possible to adjust left and right cards separatelly.

    Contributions & Feature requests

    If you have any ideas how to make this library better or you found a bug feel free to open new issue. This is our hobby project and we'd like to invite you to have fun enhancing it with us!

    Install

    npm i react-material-timeline

    DownloadsWeekly Downloads

    49

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    13.8 MB

    Total Files

    26

    Last publish

    Collaborators

    • sirwojtek