Documentação Primeiros passos
Integração com React
Adicione o componente React, exporte por uma ref e atualize configurações sem remontar.
Nesta página
Instalar
O componente oferece suporte a React 18.3 e React 19.
npm install @weavour/reactAdicionar um editor
Aguarde onReady antes de ativar ações que usam a ref. O componente remove o editor ao desmontar.
'use client';
import { useRef, useState } from 'react';
import { WeavourEditor, type WeavourEditorRef } from '@weavour/react';
export function EmailComposer() {
const editor = useRef<WeavourEditorRef>(null);
const [ready, setReady] = useState(false);
const [error, setError] = useState('');
const [html, setHtml] = useState('');
async function exportEmail() {
try {
const output = await editor.current!.exportHTML();
setHtml(output.html);
} catch (error) {
setError(error instanceof Error ? error.message : String(error));
}
}
return (
<section>
<WeavourEditor
ref={editor}
editorKey="YOUR_PUBLIC_EDITOR_KEY"
userId="user-123"
organizationId="organization-456"
style={{ height: 700 }}
onReady={() => setReady(true)}
onError={error => setError(error.message)}
/>
<button type="button" disabled={!ready} onClick={exportEmail}>
Export HTML
</button>
{error && <p role="alert">{error}</p>}
{html && <textarea aria-label="Exported HTML" readOnly value={html} />}
</section>
);
}Atualizar propriedades ou iniciar nova sessão
- Modo, tema, idioma, variáveis, condições, blocos e preferências de recursos são atualizados em tempo real. As propriedades de callback usam seus manipuladores mais recentes.
- Chave do editor, IDs de usuário e organização, conteúdo inicial e draftId exigem nova montagem. Salve o trabalho atual e altere a key do componente React.
Next.js
Use um componente com a diretiva use client, como no exemplo. As importações são seguras na renderização do servidor; o editor monta no navegador. Mantenha credenciais de envio e administração nas rotas do servidor.