Documentación Primeros pasos

Integración con React

Añade el componente React, exporta mediante una ref y cambia los ajustes sin volver a montar el editor.

En esta página

Instalación

El componente admite React 18.3 y React 19.

npm install @weavour/react

Añade un editor

Espera a onReady antes de activar acciones que usen la ref. El componente retira el editor al desmontarse.

'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>
  );
}

Cambia las props o inicia otra sesión

El modo, el tema, el idioma, las etiquetas, las condiciones, los bloques y las preferencias se actualizan en vivo. Los callbacks usan tus últimas funciones.
La clave de editor, los identificadores, el contenido inicial y draftId requieren otro montaje. Guarda el trabajo actual y cambia la key de React del componente.

Usa un componente con la directiva use client, como en el ejemplo. Los imports son compatibles con el renderizado del servidor; el editor se monta en el navegador. Mantén las credenciales de envío y administración en tus rutas del servidor.

¿Necesitas ayuda? Escríbenos

Instalación

Añade un editor

Cambia las props o inicia otra sesión

Next.js