calculateMetadata()v4.0.0

calculateMetadata is a prop that gets passed to <Composition> and takes a callback function which may transform metadata.

Use it if you:

1

need to make the duration, width, height, or fps dynamic based on some data

2

want to transform the props passed to the composition, for example to do data fetching

3

want to add a per-composition default codec

Usage / API

Define a function, you may type it using CalculateMetadataFunction - the generic argument takes the props of the component of your composition:

src/Root.tsx
tsx
import React from "react";
import { CalculateMetadataFunction, Composition } from "remotion";
import { MyComponent, MyComponentProps } from "./MyComp";
 
const calculateMetadata: CalculateMetadataFunction<MyComponentProps> = ({
  props,
  defaultProps,
  abortSignal,
}) => {
  return {
    // Change the metadata
    durationInFrames: props.duration,
    // or transform some props
    props,
    // or add per-composition default codec
    defaultCodec: "h264",
  };
};
 
export const Root: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComponent}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        text: "Hello World",
        duration: 1,
      }}
      calculateMetadata={calculateMetadata}
    />
  );
};

src/Root.tsx
tsx
import React from "react";
import { CalculateMetadataFunction, Composition } from "remotion";
import { MyComponent, MyComponentProps } from "./MyComp";
 
const calculateMetadata: CalculateMetadataFunction<MyComponentProps> = ({
  props,
  defaultProps,
  abortSignal,
}) => {
  return {
    // Change the metadata
    durationInFrames: props.duration,
    // or transform some props
    props,
    // or add per-composition default codec
    defaultCodec: "h264",
  };
};
 
export const Root: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComponent}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        text: "Hello World",
        duration: 1,
      }}
      calculateMetadata={calculateMetadata}
    />
  );
};

As argument, you get an object with the following properties:

• defaultProps: Only the default props, taken from the defaultProps prop or the Remotion Studio Data sidebar.
• props: The resolved props, taking input props into account.
• abortSignal: An AbortSignal which you can use to abort network requests if the default props have been changed in the meanwhile.

The function must return an object, which can contain the following properties:

• props optional: The final props the component receives. It must have the same shape as the props received by this function.
• durationInFrames optional: The duration of the composition in frames
• width optional: The width of the composition in pixels
• height optional: The height of the composition in pixels
• fps optional: The frames per second of the composition
• defaultCodec optional: The default codec to use for the composition.

If you return a field, it will take precendence over the props directly passed to the composition. The defaultCodec returned will have a higher priority than the config file, but less priority than explicitly passing the option to renderMedia() i.e. the composition will be rendered with this codec if nothing with higher priority was specified.

The function may be async.

The function must resolve within the timeout.

The function will get executed every time the props in the Remotion Studio changes.

See also

• <Composition>
• Data fetching
• Dynamic metadata