@bylqwjc/media-editor-react

React 适配包，提供 MediaEditor、ImageEditor、VideoEditor 和 useVideoEditor。

安装

pnpm add @bylqwjc/media-editor-react

React 和 ReactDOM 是 peer dependency，需要由业务应用提供。

locale 支持 zh、en、es 和 zh-Hant。

示例

import { ImageEditor, VideoEditor } from '@bylqwjc/media-editor-react';
import '@bylqwjc/media-editor-react/theme.css';
import '@bylqwjc/media-editor-react/filerobot.css';
import '@bylqwjc/media-editor-react/style.css';

export function Editor({ type, source }: { type: 'image' | 'video'; source?: string | File }) {
  if (type === 'image') {
    return <ImageEditor source={source} locale="zh" theme="auto" onSave={saveImageToYourApp} />;
  }
  return (
    <VideoEditor
      source={source instanceof File ? source : undefined}
      baseUrl="/api/editor"
      locale="zh"
      theme="auto"
      onExported={saveVideoToYourApp}
    />
  );
}

统一入口

import { MediaEditor } from '@bylqwjc/media-editor-react';

<MediaEditor
  baseUrl="/api/editor"
  locale="zh"
  theme="auto"
  onImageSave={saveImageToYourApp}
  onExported={(blob) => saveVideoToYourApp(blob, 'video.mp4')}
/>;