react-horizontal-timeline-view

    0.1.4 • Public • Published

    React Horizontal Timeline

    npm version Build Status Coverage Status Code Climate Dependency Status devDependency Status

    A react port of the horizontal time-line developed by CodyHouse. Here is a demo I hope you too are a fan of the elder scrolls.

    This is a fork from https://github.com/jckdrpr/react-horizontal-timeline.

    The timeline has titles here along with the date string

    HorizontalTimeline

    It will just render a timeline with the dates that you provided and it is upto you what to do when a date is selected. i.e. it will give you the index of the date that was clicked and you can do anything with it.

    Property Type Default Description
    values array undefind sorted array of dates (required)
    indexCLick function undefind function that takes the index of the array as argument (required)
    index number 0 the index of the selected date (useful if you want to control the selected date from outside like in case of react-swipeable-views)
    eventsMinDistance number 80 The minimum distance between consecutive events
    fillingMotion object { stiffness: 150, damping: 25 } Sets the animation style of how filling motion will look
    slidingMotion object { stiffness: 150, damping: 25 } Sets the animation style of how sliding motion will look
    styles object { background: '#f8f8f8', foreground: '#7b9d6f', outline: '#dfdfdf', maxSize: 800 } object containging the styles for the timeline currently outline (the color of the boundries of the thimeline and the buttons on it's either side), foreground (the filling color, active color) and background (the background color of your page) colors along with the max length of the timeline can be changed.

    This is how it can be used.

    const VALUES = [ {date: '10/01/2016', title: 'Title'}, ... ];
    
    export default class App extends React.Component {
      state = { value: 0, previous: 0 };
    
      render() {
        return (
          <div>
            <HorizontalTimeline
              indexClick={(index) => {
                this.setState({ value: index, previous: this.state.value });
              }}
              values={ VALUES } />
            <div className='text-center'>
              {/* any arbitrary component can go here */}    
              {this.state.value}
            </div>
          </div>
        );
      }
    }
    
    

    For more advanced usage take a look at the demos directory.

    Todo

    • Start using react-motion to simplify code a bit.
    • Arrows on the buttons on either side.
    • Start using some solution for css (e.g. ReactCSS, ReactStyle, etc..).
    • Make it more customizable.
    • Improve the structure.
    • Keyboard movement controls
    • Touch controls
    • Make someone use it. :D

    Running the developmnt version

    • Just clone the repo and do an npm install followed by an npm run start.
    • Then go to localhost:5000/demos/<demo_name>/index.html to see the fruits of your labor.

    Here is the information provided by the original author.

    An easy to customize, horizontal timeline powered by CSS and jQuery.

    Article on CodyHouse

    Demo

    Terms

    Install

    npm i react-horizontal-timeline-view

    DownloadsWeekly Downloads

    9

    Version

    0.1.4

    License

    MIT

    Last publish

    Collaborators

    • raghavi92