# React > Install the React DocumentEditor and DocumentViewer packages: React 19.2 and React 18 peer ranges, the Vite 8 default import, and both in one project. - **Product:** TX Text Control .NET Server - **Section:** Documentation - **Kind:** Topic - **Path:** TX Text Control .NET Server > Installation Guide > npm Packages > React - **1549 words** - **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/react/ - **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/react/llms.txt - **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/react/llms-full.txt --- One React package adds the Document Editor to your application, another the Document Viewer. Below, you find how to install them, which React versions they declare and what that means if you use both components in one project. For complete tutorials, see [Getting Started: Document Editor with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt) and [Getting Started: Document Viewer with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/react/llms-full.txt). ### Packages and Required React Versions | Package and version | Component | Peer dependencies | |---|---|---| | `@txtextcontrol/tx-react-document-editor` 34.0.0 | `DocumentEditor` | `react` and `react-dom` `^19.2.0` | | `@txtextcontrol/tx-react-document-viewer` 34.0.0 | `DocumentViewer` | `react` and `react-dom` `^18.2.0` | Neither package has other dependencies. The caret ranges mean: - `^19.2.0`: React 19.2.0 or a later 19.x version. React 18 and React 20 are outside the range. - `^18.2.0`: React 18.2.0 or a later 18.x version. React 19 is outside the range. Both components need a backend that runs TX Text Control .NET Server: the editor connects to it with `webSocketURL`, the viewer with `basePath`. See [Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-editor/llms-full.txt) and [Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-viewer/llms-full.txt). #### Earlier Package Versions Text Control released the React packages for TX Text Control .NET Server in February 2024 with version 32.2.0. The React versions they declare have changed since then: | Package versions | TX Text Control version | `react` and `react-dom` | |---|---|---| | `@txtextcontrol/tx-react-document-editor` 32.2.0 and 32.4.0 | 32.0 | `^18.2.0` | | `@txtextcontrol/tx-react-document-editor` 33.0.0 and 33.0.1 | 33.0 | `^19.0.0` | | `@txtextcontrol/tx-react-document-editor` 34.0.0 | 34.0 | `^19.2.0` | | `@txtextcontrol/tx-react-document-viewer` 32.2.0 to 32.2.2 | 32.0 | `^18.2.0` | | `@txtextcontrol/tx-react-document-viewer` 33.0.0 | 33.0 | `^18.2.0` | | `@txtextcontrol/tx-react-document-viewer` 34.0.0 | 34.0 | `^18.2.0` | The editor moved to React 19 with version 33.0.0. The viewer still declares React 18 in version 34.0.0. ### Install the Document Editor You need [Node.js](https://nodejs.org/en/download/) and npm. The Getting Started tutorial creates the application with Vite: 1. Create a React application and select **React** as the framework and **JavaScript** as the language: ```bash npm create vite@latest my-tx-document-editor-app ``` 2. Change to the new folder and install the package: ```bash cd my-tx-document-editor-app npm i @txtextcontrol/tx-react-document-editor ``` 3. Import the component and set its `webSocketURL` to the WebSocket URL of your backend. In projects created with Vite 8, take the component from the `default` property of the package, because the package is a CommonJS module; [Import the Components in Vite 8](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/react/#import-the-components-in-vite-8) shows the import. Your project must use React 19.2 or a later 19.x version. If it uses an older React version, npm stops with an `ERESOLVE` error. ### Install the Document Viewer A new Vite project uses React 19, which is outside the viewer's range. Install React 18 first, so that the versions match and npm can install the package: ```bash npm install react@18 react-dom@18 npm install @txtextcontrol/tx-react-document-viewer ``` Then import the component and set its `basePath` to the URL of your backend. In projects created with Vite 8, take the component from the `default` property of the package, as for the editor. ### Using Both Packages in One Project The editor requires React 19.2 or later within version 19, and the viewer requires React 18. No React version is inside both ranges. Peer dependencies are not installed separately for each package. Both components use the `react` and `react-dom` packages of your project, so npm can't satisfy both ranges. Whichever package you install second, npm stops the installation with an `ERESOLVE` error. In a project with React 19.2, the error names the viewer's range: ```text npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! Could not resolve dependency: npm ERR! peer react@"^18.2.0" from @txtextcontrol/tx-react-document-viewer@34.0.0 ``` The Text Control tutorials don't cover both React packages in one project. The following options follow from how npm works. #### Option 1: Use Separate Projects Put the editor and the viewer into separate React projects. Each project has its own dependencies, so the editor project uses React 19.2 and the viewer project uses React 18, and both packages install without conflicts. This is the only option in which each component runs with a React version its package declares. Both projects can connect to the same ASP.NET Core backend, because one backend application can host the Document Editor and the Document Viewer. #### Option 2: Install While Ignoring Peer Dependencies In its error message, npm offers to retry the command with `--force` or `--legacy-peer-deps` "to accept an incorrect (and potentially broken) dependency resolution". With `--legacy-peer-deps`, npm ignores peer dependencies and installs the package anyway. In a project with React 19.2 and the editor, you would install the viewer like this: ```bash npm install @txtextcontrol/tx-react-document-viewer --legacy-peer-deps ``` Before you choose this option, consider the following: - The viewer then runs with React 19, a version that its package doesn't declare. Text Control documents installing without peer dependencies for its Angular packages, but not for the React packages. Test every viewer feature you use. - The option applies only to the command you run, and npm ignores the peer dependencies of all packages during these installations. [Peer Dependency Conflicts](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/#peer-dependency-conflicts) on the Angular page explains how npm behaves and how *.npmrc* applies the option to every installation. Older package versions don't solve the conflict for version 34.0: the editor versions that declare React 18 belong to TX Text Control 32.0. Use npm packages with the same major version as your backend. ### Next Steps - [Getting Started: Document Editor with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt) — build a React application with the Document Editor step by step. - [Getting Started: Document Viewer with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/react/llms-full.txt) — build a React application with the Document Viewer step by step. - [React Integration Guide](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/react/llms-full.txt) — go further with the React components in your application. - [Updating npm Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/upgrading/npm/llms-full.txt) — move the packages to a new version. --- ## Nearby - **Previous:** [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/llms-full.txt) - **Next:** [License Configuration](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/licensing/llms-full.txt)