New to Telerik Reporting? Download free 30-day trial

How to Dynamically Style the React Report Viewer

Environment

Product Progress® Telerik® Reporting
Report Viewer React

Description

In certain cases, one might want to change the styling of the React Report Viewer widget dynamically. The styles can be controlled through the viewerContainerStyle property, even in run-time.

Solution

Using the useState React hook, we can create a styles object that we can pass to the viewerContainerStyle property. Then, whenever we update the styles state, the page will be updated and the new style rules will take effect.

For example, we can hide the report viewer through a button with the following code:

import React, { useState } from 'react';
import { TelerikReportViewer } from '@progress/telerik-react-report-viewer/dist/cjs/main';

export function ReportViewer() {

    let viewer;

    const [styles, setStyles] = useState({
        position: 'absolute',
        left: '5px',
        right: '5px',
        top: '40px',
        bottom: '5px',
        overflow: 'hidden',
        clear: 'both',
        fontFamily: 'ms sans serif'
    })

    return (
        <>
            <TelerikReportViewer
                ref={el => viewer = el}
                serviceUrl="http://localhost:59655/api/reports/"
                reportSource={{
                    report: 'Barcodes Report.trdp',
                }}
                viewerContainerStyle={styles}
                viewMode="INTERACTIVE"
                scaleMode="SPECIFIC"
                scale={1.0}
                enableAccessibility={false} />
            <button onClick={() => setStyles(prev => ({ ...prev, display: "none" }))}>Hide</button>
        </>
    )
}

See Also

In this article