# Intégrer dans React

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

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

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

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

---

Consultez d’abord [l’installation et les premiers pas](https://docs.univer.ai/fr-FR/guides/pdfs/getting-started/installation.md). Cet exemple utilise React pour monter Univer Pdfs 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 { UniverLicensePlugin } from '@univerjs-pro/license'
import { UniverPdfsPlugin } from '@univerjs-pro/pdfs'
import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'
import PdfsUIfrFR from '@univerjs-pro/pdfs-ui/locale/fr-FR'
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignfrFR from '@univerjs/design/locale/fr-FR'
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-pro/pdfs-ui/lib/index.css'

import '@univerjs-pro/pdfs/facade'

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,
          PdfsUIfrFR,
        ),
      },
    })

    univer.registerPlugin(UniverLicensePlugin, {
      license: 'your license.txt',
    })
    univer.registerPlugin(UniverUIPlugin, { container })
    univer.registerPlugin(UniverPdfsPlugin)
    univer.registerPlugin(UniverPdfsUIPlugin)

    const univerAPI = FUniver.newAPI(univer)
    univerAPI.createPdf({ name: 'Untitled PDF' })

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

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