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