Getting Started

Step-by-step guide:

• open Visual Studio;
• go to the File menu;
• select New, then Project;
• choose ASP.NET Core Web Application and click Next;
• specify the project name, location, and solution name (for example, ReactViewer), then click Create;
• proceed to platform selection: choose .NET 8 or later. Make sure to disable the Configure for HTTPS option and click Create.

Installing the NuGet Package

The next step is to install the Stimulsoft.Report.React NuGet package:

• In the project's context menu, select Manage NuGet Packages;
• Select the package and specify the version;
• Click Install.

Next, add ViewerController to the Controllers folder:

• Open the context menu of the Controllers folder and select Add item;
• Choose Controller... and set the controller type to MVC Controller – Empty;
• Click Add and enter the controller name, e.g., ViewerController;
• Click Add again.

Configuring ViewerController.cs

Create a Reports folder in the project and add a report template, for example MasterDetail.mrt. Then insert the following code in ViewerController.cs:

using Microsoft.AspNetCore.Mvc;
using Stimulsoft.Report;
using Stimulsoft.Report.React;

namespace ReactViewer.Controllers
{
    [Controller]
    public class ViewerController : Controller
    {
        static ViewerController()
        {
            // How to Activate
            //Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
            //Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
        }

        [HttpPost]
        public IActionResult InitViewer()
        {
            var requestParams = StiReactViewer.GetRequestParams(this);
            var options = new StiReactViewerOptions();
            options.Actions.GetReport = "GetReport";
            options.Actions.ViewerEvent = "ViewerEvent";
            options.Appearance.ScrollbarsMode = true;
            return StiReactViewer.ViewerDataResult(requestParams, options);
        }

        [HttpPost]
        public IActionResult GetReport()
        {
            var report = StiReport.CreateNewReport();
            var path = StiReactHelper.MapPath(this, "Reports/MasterDetail.mrt");
            report.Load(path);
            return StiReactViewer.GetReportResult(this, report);
        }

        [HttpPost]
        public IActionResult ViewerEvent()
        {
            return StiReactViewer.ViewerEventResult(this);
        }
    }
}

Configuring the .NET Server

Configure the .NET server by enabling CORS and static files support. This should be done in Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseCors(builder =>
        builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });
}

Installing the React npm Package

Open the project folder in File Explorer and create the ClientApp folder. Open a console inside it and run:

npx create-react-app . --template typescript

Then install the Stimulsoft React Viewer package from npm:

npm install stimulsoft-viewer-react

Note!

The stimulsoft-viewer-react package is published on npm and includes full TypeScript typings (.d.ts files) for IDE autocompletion.

Integrating the Viewer in App.tsx

Open the App.tsx file in the src folder and replace its contents with the following code:

import React from 'react';
import { StimulsoftViewer } from 'stimulsoft-viewer-react';

export const App: React.FC = () => {
    return (
        <StimulsoftViewer
            requestUrl="/Viewer/{action}"
            action="InitViewer"
            height="100vh"
        />
    );
};

Note that the requestUrl uses a relative path /Viewer/{action}. This works correctly because both the React frontend and the ASP.NET backend run on the same server port in production. The {action} placeholder is automatically replaced by the viewer with the appropriate action name (InitViewer, GetReport, ViewerEvent, etc.).

Building and Running the Application

To build the React client and copy the output to the wwwroot folder, open a console in the ClientApp directory and run the following commands:

npm install
npx react-scripts build
xcopy /E /Y build\* ..\wwwroot\

For convenience, you can save these commands as a build-react.cmd file in the project root so the build can be repeated with a single click.

After the build completes, run the project in Visual Studio. You will see the report viewer loaded in the browser with the specified report. Note!

The React client is built once and served as static files from wwwroot. There is no separate Node.js server required in production.

StimulsoftViewer Component Props

The StimulsoftViewer component accepts the following properties:

Using API Methods

The StimulsoftViewer component exposes an imperative API via a ref handle. This allows you to programmatically trigger viewer actions from your application:

import React, { useRef } from 'react';
import { StimulsoftViewer, StimulsoftViewerHandle } from 'stimulsoft-viewer-react';

export const App: React.FC = () => {
    const viewerRef = useRef<StimulsoftViewerHandle>(null);

    return (
        <div>
            <button onClick={() => viewerRef.current?.export('Pdf')}>
                Export PDF
            </button>
            <button onClick={() => viewerRef.current?.print()}>
                Print
            </button>
            <StimulsoftViewer
                ref={viewerRef}
                requestUrl="/Viewer/{action}"
                action="InitViewer"
                height="calc(100vh - 50px)"
            />
        </div>
    );
};

---

Want to learn more about using Stimulsoft React components? Please contact us — we are happy to assist!