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 data2
want to transform the props passed to the composition, for example to do data fetchingUsage / API
Define a function, you may type it using CalculateMetadataFunction
- the generic argument takes the props of the component of your composition:
src/Root.tsxtsx
importReact from "react";import {CalculateMetadataFunction ,Composition } from "remotion";import {MyComponent ,MyComponentProps } from "./MyComp";constcalculateMetadata :CalculateMetadataFunction <MyComponentProps > = ({props ,defaultProps ,abortSignal ,}) => {return {// Change the metadatadurationInFrames :props .duration ,// or transform some propsprops ,};};export constRoot :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.tsxtsx
importReact from "react";import {CalculateMetadataFunction ,Composition } from "remotion";import {MyComponent ,MyComponentProps } from "./MyComp";constcalculateMetadata :CalculateMetadataFunction <MyComponentProps > = ({props ,defaultProps ,abortSignal ,}) => {return {// Change the metadatadurationInFrames :props .duration ,// or transform some propsprops ,};};export constRoot :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 thedefaultProps
prop or the Remotion Studio Data sidebar.props
: The resolved props, taking input props into account.abortSignal
: AnAbortSignal
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 theprops
received by this function.durationInFrames
optional: The duration of the composition in frameswidth
optional: The width of the composition in pixelsheight
optional: The height of the composition in pixelsfps
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.