The viewer and designer can be combined into one edit-and-preview flow, switching between them with React state.

Toggle the two components with state.
function App() {
    const [isViewer, setIsViewer] = useState(true);

    function onDesignReport(args) { setIsViewer(false); }
    async function onExitDesigner() { await report.renderAsync2(); setIsViewer(true); }

    return isViewer
        ? <Viewer options={viewerOptions} report={report}
                  onDesignReport={onDesignReport} onOpenedReport={onOpenedReport} />
        : <Designer options={designerOptions} report={report}
                    onExit={onExitDesigner} onAssignedReport={onAssignedReport} />;
}

How it works. React state chooses which component renders, so users move from preview to editing and back within one screen.

By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.