Skip to main content

addComponent()v4.0.528

Adds an instance of a named component export to a composition, including its import.

warning

Draft API: This API is experimental and may change.

add-component.ts
import {addComponent, type CodemodProject} from '@remotion/codemods';

declare const project: CodemodProject;

const result = await addComponent({
  project,
  compositionFile: 'src/Root.tsx',
  compositionId: 'MyComposition',
  importName: 'Title',
  importPath: './Title',
  props: {text: 'Hello'},
  from: 0,
  durationInFrames: 60,
});

console.log(result);

Reuses an existing named import where possible and chooses a free local name on conflicts. The imported module must already exist; this operation does not generate the component implementation.

Options​

project​

An in-memory CodemodProject. The input project is not mutated.

compositionFile​

The file registering the composition. The component may be imported from another project file.

compositionId​

The static ID of the composition to edit.

importName​

The named component export to import. Must begin with an uppercase letter, _, or $. Default exports are not supported.

importPath​

The module specifier to insert. Relative imports are relative to the composition component file receiving the JSX.

props?​

A record of serializable prop values. Defaults to {}. Strings are values, not JavaScript expressions.

from?​

The start frame. When supplied, wraps the inserted content in a <Sequence>. Must be a non-negative integer. By default, no start frame is set.

durationInFrames?​

A positive integer duration for the wrapper <Sequence>. Supplying only a duration creates a wrapper starting at frame 0. By default, no duration is set.

position?​

An {x, y} position in pixels. By default, content starts at the composition origin.

Return value​

A promise resolving to an object with the following properties.

project​

The updated project. Unchanged files and extra project fields are preserved.

changes​

An array of {filePath, previousContents, nextContents} file changes. A null content value indicates a created or deleted file.

nodePathRemappings​

An array of {filePath, oldNodePath, newNodePath} mappings. A null old path indicates an insertion; a null new path indicates removal. Apply these mappings to references from the input project. See node references.

insertedNode​

The inserted component reference, or its wrapper <Sequence> reference when timing is supplied.

Errors​

Throws or rejects when the target cannot be resolved, the requested edit is unsupported, or an option is invalid. Failed edits leave the input project unchanged.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​