timeline-editor-react's Introduction

React Timeline Editor

Timeline Editor is a React component for building a Timeline like that of a video editor.

Features of timeline-editor-react

Drag and Drop frames
Lightweight ~13kb (gzipped, excluding react)

Getting started

npm install timeline-editor-react

Example

See src/example.js

import React from "react";
import ReactDOM from "react-dom";
import Timeline from "./index";

var layers = [
    {
        id: "3d1df1b4-4d9d-45a4-bf14-cb580ee74675",
        name: "Left"
    },
    {
        id: "7d8c4210-0cfa-4a10-8b21-01e6601e00bf",
        name: "Top"
    },
    {
        id: "65079f30-47a8-4469-833e-4f0eea04d233",
        name: "Bottom"
    }
];
var frames = {
    "3d1df1b4-4d9d-45a4-bf14-cb580ee74675": [{
        name: "Hello.png",
        second: 0,
        duration: 70
    },
    {
        name: "Welcome.png",
        second: 130,
        duration: 200
    }],
    "7d8c4210-0cfa-4a10-8b21-01e6601e00bf": [{
        name: "Goodbye.png",
        second: 10,
        duration: 150
    }],
    "65079f30-47a8-4469-833e-4f0eea04d233": []
};

function onUpdateFrames(frames) {
    //TODO: deal with frames
}

ReactDOM.render(
    <Timeline layers={layers} frames={frames} onUpdateFrames={onUpdateFrames}/>,
    document.getElementById("root")
);

Props

layers: (required) Array of objects, see example above,
- Available Properties
  - id - String, id of the layer
  - name - String, name or title displayed on the list
frames: (required) Object, see example above,
- key - String, layer id where the frames are placed
- value - Array of objects
  - Available Properties
    - name - String, name or title displayed on the frame
    - second - Number, initial second of the frame
    - duration - Number, duration of the frame in seconds
onUpdateFrames: Function, callback(frames)
- Use this to get notified when the user updates the frames, see example above
```
  _onUpdateFrames(frames) {
    console.log(frames);
  }
```