docs-demo

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Adding an Interactive Demo to Docs

为文档添加交互式演示

Interactive demos render a Remotion composition inline in documentation pages using

@remotion/player

. They live in

packages/docs/components/demos/

交互式演示通过

@remotion/player

在文档页面中内联渲染Remotion合成内容。这些演示文件存放在

packages/docs/components/demos/

目录下。

Steps

步骤

Create a component in
```
packages/docs/components/demos/
```
(e.g.
```
MyDemo.tsx
```
). It should be a standard React component using Remotion hooks like
```
useCurrentFrame()
```
and
```
useVideoConfig()
```
.
Register the demo in
```
packages/docs/components/demos/types.ts
```
:
- Import the component
- Export a
```
DemoType
```
  object with these fields:
  - ```
  id
```
  : unique string used in
```
  <Demo type="..." />
```
- ```
comp
```
    : the React component
  - ```
  compWidth
```
  /
```
  compHeight
```
  : canvas dimensions (e.g. 1280x720)
- ```
fps
```
    : frame rate (typically 30)
  - ```
  durationInFrames
```
  : animation length
- ```
autoPlay
```
    : whether it plays automatically
  - ```
  options
```
  : array of interactive controls (can be empty
```
  []
```
  )
Add to the demos array in
```
packages/docs/components/demos/index.tsx
```
:
- Import the demo constant from
```
./types
```
- Add it to the
```
demos
```
  array
Use in MDX with
```
<Demo type="your-id" />
```

创建组件：在
```
packages/docs/components/demos/
```
目录下创建组件（例如
```
MyDemo.tsx
```
）。它应该是一个标准的React组件，使用
```
useCurrentFrame()
```
和
```
useVideoConfig()
```
等Remotion钩子。
注册演示：在
```
packages/docs/components/demos/types.ts
```
中注册演示：
- 导入该组件
- 导出一个
```
DemoType
```
  对象，包含以下字段：
  - ```
  id
```
  ：在
```
  <Demo type="..." />
```
  中使用的唯一字符串
- ```
comp
```
    ：对应的React组件
  - ```
  compWidth
```
  /
```
  compHeight
```
  ：画布尺寸（例如1280x720）
- ```
fps
```
    ：帧率（通常为30）
  - ```
  durationInFrames
```
  ：动画时长（以帧为单位）
- ```
autoPlay
```
    ：是否自动播放
  - ```
  options
```
  ：交互式控件数组（可以为空数组
```
  []
```
  ）
添加到演示数组：在
```
packages/docs/components/demos/index.tsx
```
中：
- 从
```
./types
```
  导入演示常量
- 将其添加到
```
demos
```
  数组中
在MDX中使用：通过
```
<Demo type="your-id" />
```
标签使用

Options

选项

Options add interactive controls below the player. Each option needs

name

and

optional

(

'no'

'default-enabled'

, or

'default-disabled'

Supported types:

```
type: 'numeric'
```
— slider with
```
min
```
,
```
max
```
,
```
step
```
,
```
default
```
```
type: 'boolean'
```
— checkbox with
```
default
```
```
type: 'enum'
```
— dropdown with
```
values
```
array and
```
default
```
```
type: 'string'
```
— text input with
```
default
```

Option values are passed to the component as

inputProps

. Access them as regular React props.

选项会在播放器下方添加交互式控件。每个选项需要包含

name

和

optional

字段（可选值为

'no'

、

'default-enabled'

或

'default-disabled'

）。

支持的类型：

```
type: 'numeric'
```
— 带有
```
min
```
、
```
max
```
、
```
step
```
、
```
default
```
参数的滑块控件
```
type: 'boolean'
```
— 带有
```
default
```
参数的复选框控件
```
type: 'enum'
```
— 带有
```
values
```
数组和
```
default
```
参数的下拉菜单控件
```
type: 'string'
```
— 带有
```
default
```
参数的文本输入框控件

选项值会以

inputProps

的形式传递给组件，可以作为常规React props访问。

Example registration

注册示例

export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};

export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};