Using API Methods
Our sample projects and report templates can help you learn the basics of working with our products.For finer control you can talk to the viewer directly through its API instead of only reacting to events.
Getting a reference. Create a ref of type
Because the viewer is not a React state container, the example polls its values every 200 ms and copies them into state so the displayed zoom and page number stay in sync with what the user sees.
Getting a reference. Create a ref of type
StimulsoftViewerHandle and attach it to the component. Through that handle you get access to the viewer's properties and methods:import React, { useRef, useState, useEffect } from 'react';
import { StimulsoftViewer, StimulsoftViewerHandle } from 'stimulsoft-viewer-react';
export const App: React.FC = () => {
const viewerRef = useRef<StimulsoftViewerHandle>(null);
const [zoom, setZoom] = useState<number>(100);
const [currentPage, setCurrentPage] = useState<number>(0);
// Poll the viewer state and mirror it into React state
useEffect(() => {
const interval = setInterval(() => {
if (viewerRef.current) {
setZoom(viewerRef.current.zoom);
setCurrentPage(viewerRef.current.currentPage);
}
}, 200);
return () => clearInterval(interval);
}, []);
return (
<div>
Zoom is {zoom}<br />
Current page {currentPage + 1}<br />
<input type="button" value="Zoom to 50%"
onClick={() => { if (viewerRef.current) viewerRef.current.zoom = 50; }} />
<input type="button" value="Export to PDF"
onClick={() => { if (viewerRef.current) viewerRef.current.export('Pdf', { ImageResolution: 200 }); }} />
<StimulsoftViewer ref={viewerRef} requestUrl="/Viewer/{action}" action="InitViewer" height="100vh" />
</div>
);
};viewerRef.current.zoom— reads or sets the zoom level in percent; assigning50zooms the report to 50%.viewerRef.current.currentPage— the zero-based index of the page the user is viewing (shown as+ 1for a human-friendly number).viewerRef.current.export('Pdf', { ImageResolution: 200 })— exports the report to a given format with export settings; here PDF at 200 DPI.
Because the viewer is not a React state container, the example polls its values every 200 ms and copies them into state so the displayed zoom and page number stay in sync with what the user sees.