Parametrized rendering is the idea of creating a video template once and then render as many videos as you want with different parameters. Just like in regular React, we use props to reuse and customize components!
To define which props your video accepts, simply give your component the
React.FC type and pass in a generic argument describing the shape of the props you want to accept.
When registering the component as a sequence, you can define the default props:
React.FC, you can ensure type safety and avoid errors caused by typos.
Input props are props that are passed in externally while rendering that can replace or override the default props
When rendering (for example using the
npm run build script defined in
package.json), you can override some or all default props by passing a CLI flag. It must be either valid JSON or a path to a file that contains valid JSON. Using this technique, type safety cannot be guaranteed.
Using inline JSON
Using a file path:
When server-rendering using
renderFrames, you can pass props using the
When using GitHub Actions, you need to adjust the file at
.github/workflows/render-video.yml to make the inputs in the
workflow_dispatch section manually match the shape of the props your root component accepts.
Input props are passed to the component of your composition directly and you can access as regular React component props.
Available since v2.0.: You can also use the
getInputProps() function to retrieve props that you have given as an input. This is useful if you need to retrieve the props in a position where you are not inside your component, such as when determining the video duration, dimensions or frame rate.
Even if you have registered a component as a sequence, you can still use it as normal in your videos and pass it's props directly. Default props don't apply in this case.