packages/docs/docs/use-video-config.mdx
With this hook, you can retrieve some info about the composition you are in.
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>;
};
A object with the following properties:
widthThe 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.
heightThe 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.
fpsThe frame rate of the composition, in frames per seconds.
durationInFramesIf inside a <Sequence>, the duration of the sequence in frames.
If not inside a <Sequence>, the duration of the composition in frames.
idThe ID of the composition. This is the same as the id prop of the <Composition> component.
defaultPropsThe object that you have defined as the defaultProps in your composition.
props<AvailableFrom v="4.0.0" />The props that were passed to the composition, after all transformations.
defaultCodec<AvailableFrom v="4.0.54" />The default codec that is used for rendering this composition. Use calculateMetadata() to modify it.
defaultSampleRate<AvailableFrom v="4.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.