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>
</>
)
}