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

khanzzirfan/react-timeline-editor

This branch is up to date with xzdarcy/react-timeline-editor:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

47a1580 Β· Mar 27, 2024

History

50 Commits
Mar 5, 2023
Feb 19, 2023
Feb 19, 2022
Jan 18, 2024
Feb 19, 2022
Feb 19, 2022
Feb 19, 2022
Feb 19, 2022
Feb 19, 2022
Feb 19, 2022
Feb 19, 2022
Mar 1, 2022
Mar 5, 2023
Jul 16, 2022
Feb 19, 2022

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.5%
  • Less 4.5%