calculateMetadata()<AvailableFrom v="4.0.0" />

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

Use it if you:

<Step>2</Step> want to transform the props passed to the composition, for example to do <a href="/docs/data-fetching">data fetching</a>

The calculateMetadata() function is called a single time, independently from the concurrency of the render.
It runs in a separate tab, as part of the render process calling selectComposition().

Usage / API

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

// @filename: MyComp.tsx
import React from 'react';
export type MyComponentProps = {
  text: string;
  duration: number;
};

export const MyComponent: React.FC<MyComponentProps> = ({text}) => {
  return <div>{text}</div>;
};

// @filename: Vid.tsx
// ---cut---
import React from 'react';
import {CalculateMetadataFunction, Composition} from 'remotion';
import {MyComponent, MyComponentProps} from './MyComp';

const calculateMetadata: CalculateMetadataFunction<MyComponentProps> = ({props, defaultProps, abortSignal, isRendering}) => {
  return {
    // Change the metadata
    durationInFrames: props.duration,
    // or transform some props
    props,
    // or add per-composition default codec
    defaultCodec: 'h264',
    // or add per-composition default video image format
    defaultVideoImageFormat: 'png',
    // or add per-composition default pixel format
    defaultPixelFormat: 'yuv420p',
    // or add per-composition default ProRes profile
    defaultProResProfile: 'hq',
    // or add per-composition default audio sample rate
    defaultSampleRate: 44100,
  };
};

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.
• compositionId (available from v4.0.98): The ID of the current composition
• isRendering (available from v4.0.342): A boolean indicating whether the function is being called during rendering (true) or in other contexts like the Studio (false)

The function must return an pure JSON-serializable object, which can contain the following properties:

• props: The final props the component receives. It must have the same shape as the props received by this function. The props must be a plain object and must not contain any non-JSON-serializable values, except Date, Map, Set and staticFile(). Optional.
• durationInFrames: The duration of the composition in frames. Optional.
• width: The width of the composition in pixels. Optional.
• height: The height of the composition in pixels. Optional.
• fps: The frames per second of the composition. Optional.
• defaultCodec: The default codec to use for the composition. Optional.
• defaultOutName: The default output name when rendering (without file extension). Optional. <AvailableFrom v="4.0.268" />
• defaultVideoImageFormat: The default video image format ('png', 'jpeg', or 'none'). Optional. <AvailableFrom v="4.0.316" />
• defaultPixelFormat: The default pixel format ('yuv420p', 'yuva420p', 'yuv422p', 'yuv444p', 'yuv420p10le', 'yuv422p10le', 'yuv444p10le', or 'yuva444p10le'). Optional. <AvailableFrom v="4.0.316" />
• defaultProResProfile: The default ProRes profile ('4444-xq', '4444', 'hq', 'standard', 'light', or 'proxy'). Optional. <AvailableFrom v="4.0.367" />
• defaultSampleRate: The default audio sample rate in Hz. Optional. <AvailableFrom v="4.0.448" />

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.

Compatibility

See also

• <Composition>
• Data fetching
• Dynamic metadata