useVideoConfig()
With this hook, you can retrieve some info about the composition you are in.
Example
import React from 'react';
import {useVideoConfig } from 'remotion';
export const MyComp : React .FC = () => {
const {width , height , fps , durationInFrames } = useVideoConfig ();
console .log (width ); // 1920
console .log (height ); // 1080
console .log (fps ); // 30;
console .log (durationInFrames ); // 300
return <div >Hello World!</div >;
};Return value
A object with the following properties:
width
The width of the composition in pixels, or the width of a <Sequence> if the component that calls useVideoConfig() is a child of a <Sequence> that defines a width.
height
The height of the composition in pixels, or the height of a <Sequence> if the component that calls useVideoConfig() is a child of a <Sequence> that defines a height.
fps
The frame rate of the composition, in frames per seconds.
durationInFrames
If inside a <Sequence>, the end of the sequence in its local frame space.
If not inside a <Sequence>, the duration of the composition in frames.
This accounts for playbackRate and trimBefore. For example, a sequence visible for 40 parent frames with playbackRate={2} and trimBefore={10} returns 90: 40 * 2 + 10. Its children start at local frame 10 and unmount before local frame 90.
id
The ID of the composition. This is the same as the id prop of the <Composition> component.
defaultProps
The object that you have defined as the defaultProps in your composition.
propsv4.0.0
The props that were passed to the composition, after all transformations.
defaultCodecv4.0.54
The default codec that is used for rendering this composition. Use calculateMetadata() to modify it.
defaultSampleRatev4.0.448
The default audio sample rate that is used for rendering this composition. Use calculateMetadata() to modify it.
These properties are controlled by passing them as props to <Composition>. Read the page about the fundamentals to read how to setup a Remotion project.
Compatibility
| Browsers | Environments | |||||
|---|---|---|---|---|---|---|
Chrome | Firefox | Safari | ||||