GuidesReact hook

React hook

useVideoCompressor() owns a session for the component's lifetime. Keep it inside a React component or custom hook. This complete component accepts a readable input URI from your app and handles native failures, validation rejections, and cancellation.

React Native · TSX

import { useState } from "react";
import { Button, Text, View } from "react-native";
import { useVideoCompressor } from "react-native-media-transformer";

export function CompressionPanel({ inputUri }: { inputUri: string }) {
  const [message, setMessage] = useState<string | null>(null);
  const {
    compressVideo,
    cancel,
    isCompressing,
    progressPercent,
    error,
    outputPath,
  } = useVideoCompressor();

  const start = async () => {
    setMessage(null);
    try {
      await compressVideo(inputUri, { quality: "medium" });
    } catch (cause) {
      setMessage(cause instanceof Error ? cause.message : String(cause));
    }
  };

  const stop = async () => {
    try {
      await cancel();
    } catch (cause) {
      setMessage(cause instanceof Error ? cause.message : String(cause));
    }
  };

  return (
    <View>
      <Button title="Compress video" onPress={start} disabled={isCompressing} />
      <Button title="Cancel" onPress={stop} disabled={!isCompressing} />
      <Text>{progressPercent}%</Text>
      {(message || error) && <Text>{message ?? error?.message}</Text>}
      {outputPath && <Text>{outputPath}</Text>}
    </View>
  );
}

Returned member	Type	Behavior
`compressVideo`	`(inputUri: string, options?: CompressOptions) => Promise<string>`	Starts/replaces work in the hook's session. Resolves with the output path or rejects. No per-call progress callback parameter.
`cancel`	`() => Promise<void>`	Stops the current export. The active `compressVideo` call rejects independently.
`reset`	`() => Promise<void>`	Cancels active work and clears progress, error, output path, and busy state. Does not delete files.
`isCompressing`	`boolean`	Initially false; true while the current accepted request is active.
`progress`	`number`	Initially 0; fractional export progress.
`progressPercent`	`number`	`Math.round(progress * 100)`.
`error`	`Error` or `null`	Initially null. Records errors caught during the current accepted native request, including cancellation.
`outputPath`	`string` or `null`	Initially null. Set on successful export; cleared when a new accepted request starts or the hook resets.

Every accepted request clears the previous error/output, sets progress to 0, and marks the hook busy. Input/option validation happens before the hook changes state or enters its native-work catch block. Catch the returned compressVideo promise to handle all failures; a validation rejection can leave error null.

Stale callbacks/results from replaced requests do not replace current state. Unmount cancels the hook's session and prevents later state updates. Await reset() to cancel active work and clear progress, error, output path, and busy state. Reset does not delete completed files.

There is no separately exported hook-result interface. Derive an application type with ReturnType<typeof useVideoCompressor>.

View source for this version Documentation for v0.1.0