Skip to main content

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

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,
};
};
 
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,
};
};
 
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:

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

If you return a field, it will take precendence over the props directly passed to the composition.

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