@bylqwjc/react-video-editor 1.0.3

package/README.md

@@ -0,0 +1,85 @@
+<p align="center">
+  <a href="https://github.com/designcombo/react-video-editor">
+    <img width="150px" height="150px" src="https://cdn.designcombo.dev/combo-logo-black.png"/>
+  </a>
+</p>
+<h1 align="center">React Video Editor</h1>
+
+<div align="center">
+  
+Video Editor application using React and TypeScript.
+
+<p align="center">
+    <a href="https://designcombo.dev/">Combo</a>
+    ·  
+    <a href="https://discord.gg/jrZs3wZyM5">Discord</a>
+    ·  
+    <a href="https://github.com/designcombo/react-video-editor">X</a>
+</p>
+</div>
+
+[![](https://raw.githubusercontent.com/designcombo/react-video-editor/main/images/combo.png)](https://github.com/designcombo/react-video-editor)
+
+## ✨ Features
+
+- 🎬 Timeline Editing: Arrange and trim media on a visual timeline.
+- 🌟 Effects and Transitions: Apply visual effects, filters, and transitions.
+- 🔀 Multi-track Support: Edit multiple video and audio tracks simultaneously.
+- 📤 Export Options: Save videos in various resolutions and formats.
+- 👀 Real-time Preview: See immediate previews of edits.
+
+## 🚀 See It in Action
+
+Check out the deployed version here: [React Video Editor Live Demo](https://video.designcombo.dev/)
+
+## Package Usage
+
+Install the package:
+
+```bash
+npm install @bylqwjc/react-video-editor
+```
+
+Import the React entry when the host project already uses React:
+
+```tsx
+import { VideoEditorLauncher } from "@bylqwjc/react-video-editor";
+import "@bylqwjc/react-video-editor/styles.css";
+```
+
+Import the web component entry for Vue or other non-React hosts:
+
+```ts
+import "@bylqwjc/react-video-editor/styles.css";
+import {
+  openVideoEditor,
+  registerVideoEditorElement,
+} from "@bylqwjc/react-video-editor/web-component";
+```
+
+The `web-component` bundle is published as a self-contained browser build, so consumers do not need to rebundle `framer-motion`, `next-themes`, or React internals just to open the editor.
+
+## ⌨️ Development
+
+### Environment Variables
+
+Create a `.env` file in the project root and add the following:
+
+```env
+PEXELS_API_KEY=""
+```
+
+Clone locally:
+
+```bash
+git clone git@github.com:designcombo/react-video-editor.git
+cd react-video-editor
+pnpm install
+pnpm dev
+```
+
+Open your browser and visit http://localhost:3000 , see more at [Development](https://github.com/designcombo/react-video-editor).
+
+## 📝 License
+
+Copyright © 2025 [DesignCombo](https://designcombo.dev/).

package/dist/react.d.ts

@@ -0,0 +1,50 @@
+import type { JSX, ReactNode } from "react";
+
+export interface EditorProps {
+  tempId?: string;
+  id?: string;
+  embedded?: boolean;
+  showNavbar?: boolean;
+  className?: string;
+  onClose?: () => void;
+}
+
+declare const Editor: (props: EditorProps) => JSX.Element;
+export default Editor;
+export { Editor };
+
+export interface VideoEditorProviderProps {
+  children: ReactNode;
+  defaultTheme?: "light" | "dark" | "system";
+  withToaster?: boolean;
+}
+
+export declare function VideoEditorProvider(
+  props: VideoEditorProviderProps,
+): JSX.Element;
+
+export interface VideoEditorModalProps
+  extends Pick<EditorProps, "tempId" | "id" | "showNavbar"> {
+  trigger?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  contentClassName?: string;
+  editorClassName?: string;
+  defaultTheme?: "light" | "dark" | "system";
+  withToaster?: boolean;
+}
+
+export declare function VideoEditorModal(
+  props: VideoEditorModalProps,
+): JSX.Element;
+
+export interface VideoEditorLauncherProps
+  extends Omit<VideoEditorModalProps, "trigger"> {
+  buttonText?: string;
+  buttonClassName?: string;
+}
+
+export declare function VideoEditorLauncher(
+  props: VideoEditorLauncherProps,
+): JSX.Element;