Adicionando uma Demonstração Interativa à Documentação
Demonstrações interativas renderizam uma composição Remotion inline nas páginas de documentação usando @remotion/player. Elas ficam em packages/docs/components/demos/.
Etapas
-
Crie um componente em
packages/docs/components/demos/(ex.:MyDemo.tsx). Deve ser um componente React padrão que utiliza hooks do Remotion comouseCurrentFrame()euseVideoConfig(). -
Registre a demonstração em
packages/docs/components/demos/types.ts:- Importe o componente
- Exporte um objeto
DemoTypecom os seguintes campos:id: string única usada em<Demo type="..." />comp: o componente ReactcompWidth/compHeight: dimensões do canvas (ex.: 1280x720)fps: taxa de quadros (geralmente 30)durationInFrames: duração da animaçãoautoPlay: se reproduz automaticamenteoptions: array de controles interativos (pode ser vazio[])
-
Adicione ao array de demos em
packages/docs/components/demos/index.tsx:- Importe a constante da demonstração de
./types - Adicione-a ao array
demos
- Importe a constante da demonstração de
-
Use em MDX com
<Demo type="seu-id" />
Opções
Opções adicionam controles interativos abaixo do player. Cada opção precisa de name e optional ('no', 'default-enabled' ou 'default-disabled').
Tipos suportados:
type: 'numeric'— slider commin,max,step,defaulttype: 'boolean'— checkbox comdefaulttype: 'enum'— menu suspenso com arrayvaluesedefaulttype: 'string'— campo de texto comdefault
Os valores das opções são passados para o componente como inputProps. Acesse-os como props React normais.
Exemplo de registro
export const myDemo: DemoType = {
comp: MyDemoComp,
compHeight: 720,
compWidth: 1280,
durationInFrames: 150,
fps: 30,
id: 'my-demo',
autoPlay: true,
options: [],
};