---
title: "Leiho pour React : l’édition visuelle sur WordPress"
description: "React avec Vite, Remix ou React Router : un composant à côté de votre app, et field() sur ce que les éditeurs doivent pouvoir modifier."
url: https://leiho.dev/fr/frameworks/react
lang: fr
updated: 2026-11-04
---
React · Aussi Remix et React Router

# Édition visuelle pour React, sur WordPress.

React avec Vite, Remix ou React Router : un composant à côté de votre app, et field() sur ce que les éditeurs doivent pouvoir modifier.

1. 01
   ## Autorisez l’éditeur à afficher votre site
   Définissez l’en-tête chez votre hébergeur, et dans vite.config.ts pour vite dev et vite preview.
   ```
   /*
     Content-Security-Policy: frame-ancestors 'self' https://cms.example.com
   ```
   ```
   {
     "headers": [
       {
         "source": "/(.*)",
         "headers": [
           { "key": "Content-Security-Policy", "value": "frame-ancestors 'self' https://cms.example.com" }
         ]
       }
     ]
   }
   ```
   ```
   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   const csp = "frame-ancestors 'self' https://cms.example.com";
   
   export default defineConfig({
     plugins: [react()],
     server: { headers: { 'Content-Security-Policy': csp } },
     preview: { headers: { 'Content-Security-Policy': csp } },
   });
   ```
2. 02
   ## Ajoutez le bridge
   Installez le package, puis ajoutez le composant à côté de votre app dans src/main.tsx.
   ```Terminal
   npm install leiho
   ```
   ```tsx
   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import { LeihoBridge } from 'leiho/react';
   import App from './App';
   
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <App />
       <LeihoBridge wpOrigin="https://cms.example.com" />
     </StrictMode>
   );
   ```
   Remix ou React Router : placez-le dans app/root.tsx.
3. 03
   ## Lisez le contenu
   L’app récupère une page à la fois, depuis le navigateur.
   ```ts
   import { useEffect, useState } from 'react';
   
   export function usePage(path: string) {
     const [page, setPage] = useState<any>(null);
   
     useEffect(() => {
       const url = new URL('https://cms.example.com/wp-json/leiho/v1/content');
       url.searchParams.set('path', path);
       let cancelled = false;
       fetch(url)
         .then((res) => res.json())
         .then((items) => {
           if (!cancelled) setPage(items[0] ?? null);
         });
       return () => {
         cancelled = true;
       };
     }, [path]);
   
     return page;
   }
   ```
   Loaders Remix ou React Router : utilisez plutôt loadLeihoContent depuis leiho/content.
4. 04
   ## Marquez ce que les éditeurs peuvent modifier
   Appliquez field() sur chaque élément que les éditeurs doivent pouvoir modifier. Affichez toujours l’élément, même quand sa valeur est vide.
   ```JSX
   import { field, entry } from 'leiho';
   // field() writes data-wp-post + data-wp-field, entry() names a section.
   // Flexible content rows: block(page, 'sections', i, 'Label').
   
   <section {...entry(page, 'Hero')}>
     <h1 {...field(page, 'hero_title')}>{page.fields.hero_title}</h1>
     <img {...field(page, 'hero_image')} src={page.fields.hero_image?.url} alt={page.fields.hero_image?.alt} />
     {page.fields.cards?.map((card, i) => (
       <article key={i} {...field(page, `cards.${i}.title`)}>{card.title}</article>
     ))}
   </section>
   ```

Remplacez https://cms.example.com par l’adresse de votre WordPress. Dans wp-admin, **Leiho → Démarrer** affiche ces étapes avec votre adresse, vérifie chacune et peut confier toute l’installation à votre agent de code en une seule consigne.

Autres frameworks

- [**Next.js**](https://leiho.dev/fr/frameworks/nextjs)
- [**Astro**](https://leiho.dev/fr/frameworks/astro)
- [**Nuxt**](https://leiho.dev/fr/frameworks/nuxt)
- [**SvelteKit**](https://leiho.dev/fr/frameworks/sveltekit)
- [**HTML, PHP and others**](https://leiho.dev/fr/frameworks/html)

## Modifiez le vrai site.

Gratuit et open source. Essayez-le sur un vrai WordPress, dans votre navigateur.

- [Essayer dans votre navigateur](https://leiho.dev/fr/try)
- [Voir sur GitHub](https://github.com/pixelersagency/leiho)