Integrate Univer with React

React 17, 18, 19

Notes before integration

Univer throws a warning in React 19+: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack. Don’t worry, this won’t affect the use of Univer, we will gradually fix this issue in future versions.

Integration steps

Initialize Univer in the useEffect hook
Destroy Univer in the return function of the useEffect hook

Example

import React, { useEffect, useRef } from 'react'
 
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css';
 
export function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    const { univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: merge(
          {},
          UniverPresetSheetsCoreEnUS,
        ),
      },
      theme: defaultTheme,
      presets: [
        UniverSheetsCorePreset({
          container: containerRef.current,
        }),
      ],
    });
    
    univerAPI.createUniverSheet({ name: 'Test Sheet' });
 
    return () => {
      univerAPI.dispose();
    };
  }, [])
 
  return (
    <div ref={containerRef}></div>
  );
}

React 16.9+

Notes before integration

Although the view layer of Univer is developed based on React 18.3.1, we also provide minimal compatibility for React 16.9+ projects. Please note that this does not mean that Univer will support low versions of React indefinitely. All software needs to be updated constantly to adapt to new technologies and requirements, so we still recommend that you upgrade to the latest version of React as soon as possible.
To use Univer in React 16.9+, you need to use the alias feature of the build tool to simulate the export of react-dom/client:

vite.config.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
+      "react-dom/client": path.resolve(__dirname, './src/client.ts'),
    }
  }
}

src/client.ts

import ReactDOM from 'react-dom'
 
export function createRoot(container: HTMLElement) {
  return {
    render: (element: JSX.Element) => {
      ReactDOM.render(element, container)
    }
  }
}

Integration steps

Initialize Univer in the useEffect hook
Destroy Univer in the return function of the useEffect hook

Example

import React, { useEffect, useRef } from 'react'
 
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css';
 
export function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    const { univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: merge(
          {},
          UniverPresetSheetsCoreEnUS,
        ),
      },
      theme: defaultTheme,
      presets: [
        UniverSheetsCorePreset({
          container: containerRef.current,
        }),
      ],
    });
    
    univerAPI.createUniverSheet({ name: 'Test Sheet' });
 
    return () => {
      univerAPI.dispose();
    };
  }, [])
 
  return (
    <div ref={containerRef}></div>
  );
}

Run Univer on Node.js Vue

Was this page helpful?