sibinx7 / timeline-editor-react

A timeline like a video editor made using react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Timeline Editor

npm npm npm

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);
      }

Contributing

  • Comment your code
  • Describe your feature/implementation in the pullrequest
  • Write clean code

License

MIT

About

A timeline like a video editor made using react

License:MIT License


Languages

Language:JavaScript 69.2%Language:CSS 30.8%