Skip to content

react-timeline-editor is a react component used to quickly build a timeline animation editor.

License

Notifications You must be signed in to change notification settings

xzdarcy/react-timeline-editor

Repository files navigation

React Timeline Editor

npm version npm downloads

React Timeline Editor is a react component used to quickly build a timeline animation editor.

example

Getting Started

npm install @xzdarcy/react-timeline-editor
import { Timeline, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';
import React from 'react';

const mockData: TimelineRow[] = [{
    id: "0",
    actions: [
      {
        id: "action00",
        start: 0,
        end: 2,
        effectId: "effect0",
      },
    ],
  },
  {
    id: "1",
    actions: [
      {
        id: "action10",
        start: 1.5,
        end: 5,
        effectId: "effect1",
      }
    ],
}]

const mockEffect: Record<string, TimelineEffect> = {
  effect0: {
    id: "effect0",
    name: "效果0",
  },
  effect1: {
    id: "effect1",
    name: "效果1",
  },
};

const TimelineEditor = () => {
  return (
      <Timeline
        editorData={mockData}
        effects={mockEffect}
      />
  );
};

Documention

Checkout the Docs for a demonstration of some basic and advanced features.