React Report Viewer Component Overview

The React Report Viewer is a Bold Reports® component that renders SSRS, RDL, RDLC, and Bold Report Server® reports inside React applications. You add it to your project as an npm package and use it to display, interact with, and export reports without leaving your React component tree.

This page introduces what the React Report Viewer does, its key capabilities, common use cases, and where to go next to add it to your application.

What is the React Report Viewer?

The React Report Viewer is distributed as an npm package and wraps a native React component that you import and render like any other component in your application. It can display reports with or without a connection to SSRS or Bold Report Server, so you can bind it directly to local RDL or RDLC report definitions and data sources, or point it at a report server for centrally managed reports.

Because it is a component-library integration rather than a standalone application, the Report Viewer fits into your existing React architecture. You control its placement, sizing, and lifecycle the same way you would any other component, while the underlying reporting engine handles report processing, rendering, and export.

With the React Report Viewer, you can

  • Render RDL and RDLC reports inside a React component with full support for major RDL reporting capabilities.
  • Bind data sources and report parameters directly from your application state.
  • Export rendered reports to PDF, Excel, CSV, Word, PowerPoint, and HTML formats.
  • Connect to SSRS or Bold Report Server®, or run reports locally without either.

Key features

Interactive report rendering

  • Drill down and drill through navigation.
  • Hyperlink navigation within report content.
  • Interactive sorting.

React-first customization

  • Customize every visual element using standard React props and styling.
  • Hook into exposed events for report processing customization.

Multi-framework component parity

  • The same reporting engine backs the Bold Reports® viewers for jQuery, Angular, Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, WPF, and UWP.
  • Report behavior stays consistent if your organization uses more than one platform.

Flexible report sourcing

  • Render reports from local RDL or RDLC files.
  • Connect to a Bold Report Server® instance or an existing SSRS deployment.

Common use cases

Embedding reports in internal dashboards

  • Add the Report Viewer to a React admin panel or internal dashboard.
  • Let team members view operational reports without switching to a separate tool.

Delivering customer-facing analytics

  • Use the viewer inside a customer-facing React application.
  • Display account statements, usage summaries, or other RDL-based reports directly in the product UI.

Migrating from SSRS-only reporting

  • Bind the viewer to an existing SSRS report server.
  • Modernize the presentation layer in React while keeping report definitions and data sources unchanged.

Building export-driven workflows

  • Let users download reports directly from a React application.
  • Support offline review and sharing outside the application.

Who should use this guide?

This guide is intended for:

  • React developers integrating reporting into a new or existing application.
  • Front-end teams evaluating npm-based reporting components for a React project.
  • Developers migrating report viewing functionality from another framework to React.
  • Technical teams connecting a React application to SSRS or Bold Report Server®.

Prerequisites

Before you begin:

  • A React application (or a React-based boilerplate) that you can add the component library to.
  • Node.js and npm (or yarn) installed for managing the component’s package dependencies.
  • An RDL or RDLC report file, or access to an SSRS or Bold Report Server® instance, to render.

No server-side installation is required to render local report files; a report server is needed only if you plan to connect to SSRS or Bold Report Server®.

Considerations and limitations

  • Rendering fidelity depends on the features used in the RDL or RDLC report definition; verify complex report layouts after migrating from another viewer.
  • Connecting to SSRS or Bold Report Server® requires network access and valid credentials for that server.
  • Export format availability can vary based on report content, such as interactive elements that do not translate to static export formats.

FAQ

Do I need SSRS or Bold Report Server to use the React Report Viewer?

No. The Report Viewer can render local RDL or RDLC report files directly, without any report server. SSRS or Bold Report Server® is only required if you want to serve reports from a centrally managed server.

How is the React Report Viewer installed?

It is installed as an npm package into your React application, then imported and used as a component, the same way you would add any other third-party React component library.

Which report formats does the React Report Viewer support?

It supports RDL and RDLC report definitions, and can export rendered reports to PDF, Excel, CSV, Word, PowerPoint, and HTML.

Can the same reports be used with other framework viewers?

Yes. The underlying report format and processing engine are shared across the Bold Reports® viewers for jQuery, Angular, Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, WPF, and UWP, so RDL and RDLC reports are portable between them.

Can I customize the toolbar and other UI elements?

Yes. The toolbar and other visual elements can be customized, and the component exposes events for further customization of report processing.

Getting help

If you run into an issue while integrating the React Report Viewer, start with the getting-started and how-to guides linked below, which cover common integration steps in detail. For questions not covered in the documentation, reach out through the Bold Reports® support channels for further assistance.