Neverending Package Mountain

    react-timeline-slider

    0.0.4 • Public • Published

    React Timeline

    A Timeline Slider for React.

    Usage

    <ReactTimeline 
      range={[2010, 2011, 2012]}
      width="600"
      height: "40" />

    Installation

    The recommended way to install react-timeline-slider is through npm (with browserify, webpack or a similar bundler)

    npm install react-timeline-slider

    Alternatively, you can copy the react-timeline-slider directory inside dist and use it in your RequireJS project. You will need to set it as a package:

    require.config({
      "packages": ["react-timeline-slider"]
    });

    Feel free to check the RequireJS example.

    Contributing and running examples

    First, clone the repository

    git clone git@github.com:ecostage/react-timeline-slider.git

    Install the dependencies

    cd react-timeline-slider
    npm install

    You can then build the development bundle:

    npm run build

    Start the http-server to take a look at or modify the examples:

    npm run server

    Keep gulp watching changes on the background and rebuilding:

    npm run watch

    Or just do all of them at once with:

    npm start

    The development bundle bundles all the dependencies (including React itself) and exposes the globals React and ReactDOM to make things easier for everyone.

    The examples should be available at http://localhost:8080/example/examples/<example>.html

    Styling

    $background-color: 'gray';
    $handler-color: 'blue';
    $connector-color: 'green';
     
    .react-timeline-slider {
      &__background {
        fill: $background-color;
      }
     
      &__tick-point {
        r: 2;
      }
     
      &__tick-text {
        font-size: 10px;
      }
     
      &__handler {
        r: 7;
        fill: $handler-color;
        transition: r 0.4s;
     
        &:hover {
          fill: darken($handler-color, 12%);
        }
     
        &:active {
          r: 9;
        }
      }
     
      &__line-between-handlers {
        stroke: $connector-color;
        stroke-width: 4px;
      }
     
      &__control-bg {
        fill: rgba(170, 170, 170, 0.7);
      }
     
      &__control-button {
        fill: rgb(255, 255, 255);
      }
     
      &__control-pause {
        fill: rgb(148, 57, 57);
      }
     
      &__control-play {
        fill: rgb(131, 240, 132);
      }
    }

    Keywords

    none

    Install

    npm i react-timeline-slider

    DownloadsWeekly Downloads

    3

    Version

    0.0.4

    License

    ISC

    Last publish

    Collaborators

    • mateusmedeiros