React

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 and Getting Started: Document Viewer with React.

Packages and Required React Versions

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 and Document Viewer.

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:

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 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:

   npm create vite@latest my-tx-document-editor-app
   

2. Change to the new folder and install the package:

   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 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:

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:

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:

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 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 — build a React application with the Document Editor step by step.
• Getting Started: Document Viewer with React — build a React application with the Document Viewer step by step.
• React Integration Guide — go further with the React components in your application.
• Updating npm Packages — move the packages to a new version.