# Intégrer dans React

- Human documentation: [https://docs.univer.ai/fr-FR/guides/boards/getting-started/integrations/react](https://docs.univer.ai/fr-FR/guides/boards/getting-started/integrations/react)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/boards/getting-started/integrations/react.md](https://docs.univer.ai/fr-FR/guides/boards/getting-started/integrations/react.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [boards/getting-started/integrations/react.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/getting-started/integrations/react.fr-FR.mdx)

---

Consultez d’abord [l’installation et les premiers pas](https://docs.univer.ai/fr-FR/guides/boards/getting-started/installation.md). Cet exemple utilise React pour monter Univer Boards dans un conteneur avec une hauteur explicite.

### Étapes d’intégration

1. Initialisez Univer dans `useEffect`.
2. Libérez Univer dans `useEffect cleanup`.

### Exemple de code

Chaque montage utilise son propre conteneur enfant. La destruction est différée dans une microtâche après le nettoyage React parent, afin de ne pas démonter une racine React imbriquée pendant un commit.

```tsx
import { useEffect, useRef } from 'react'
import { UniverBoardsPlugin } from '@univerjs-pro/boards'
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'
import BoardsUIfrFR from '@univerjs-pro/boards-ui/locale/fr-FR'
import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'
import InkUIfrFR from '@univerjs-pro/ink-ui/locale/fr-FR'
import { UniverLicensePlugin } from '@univerjs-pro/license'
import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'
import DesignfrFR from '@univerjs/design/locale/fr-FR'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIfrFR from '@univerjs/docs-ui/locale/fr-FR'
import { UniverDrawingPlugin } from '@univerjs/drawing'
import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'
import DrawingUIfrFR from '@univerjs/drawing-ui/locale/fr-FR'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIfrFR from '@univerjs/ui/locale/fr-FR'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/drawing-ui/lib/index.css'
import '@univerjs-pro/ink-ui/lib/index.css'
import '@univerjs-pro/boards-ui/lib/index.css'

export function UniverEditor() {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const host = containerRef.current
    if (!host) return
    const container = document.createElement('div')
    container.style.height = '100%'
    host.append(container)

    const univer = new Univer({
      locale: LocaleType.FR_FR,
      locales: {
        [LocaleType.FR_FR]: mergeLocales(
          DesignfrFR,
          UIfrFR,
          DocsUIfrFR,
          DrawingUIfrFR,
          InkUIfrFR,
          BoardsUIfrFR,
        ),
      },
    })

    univer.registerPlugin(UniverLicensePlugin, {
      license: 'your license.txt',
    })
    univer.registerPlugin(UniverRenderEnginePlugin)
    univer.registerPlugin(UniverUIPlugin, { container })
    univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)
    univer.registerPlugin(UniverDrawingPlugin)
    univer.registerPlugin(UniverDrawingUIPlugin)
    univer.registerPlugin(UniverInkUIPlugin)
    univer.registerPlugin(UniverBoardsPlugin)
    univer.registerPlugin(UniverBoardsUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})

    return () => {
      queueMicrotask(() => {
        univer.dispose()
        container.remove()
      })
    }
  }, [])

  return <div ref={containerRef} style={{ height: 600 }} />
}
```