Documentation Bien démarrer

Intégration React

Ajoutez le composant React, exportez via une ref et modifiez les réglages sans remonter l’éditeur.

Sur cette page

Installation

Le composant prend en charge React 18.3 et React 19.

npm install @weavour/react

Ajouter un éditeur

Attendez onReady avant d’activer les actions qui utilisent la ref. Le composant retire l’éditeur lorsqu’il est démonté.

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

Modifier les props ou changer de session

Le mode, le thème, la langue, les variables, les conditions, les blocs et les préférences de fonctionnalités se mettent à jour à chaud. Les callbacks utilisent vos derniers gestionnaires.
La clé d’éditeur, les identifiants, le contenu initial et draftId nécessitent un nouveau montage. Sauvegardez le travail en cours, puis changez la key React du composant.

Utilisez un composant avec la directive use client, comme dans l’exemple. Les imports sont compatibles avec le rendu serveur ; l’éditeur se monte dans le navigateur. Gardez les secrets d’envoi et d’administration dans vos routes serveur.

Besoin d’aide ? Contactez-nous

Installation

Ajouter un éditeur

Modifier les props ou changer de session

Next.js