React functional component

Stimulsoft Reports.JS discussion
Post Reply
ysantosa
Posts: 15
Joined: Wed Sep 11, 2019 12:22 am

React functional component

Post by ysantosa »

Are there any examples of using Viewer in React functional components ?

All React examples are in Class, I'd like to see one done in functional component.

*edit: to elaborate - what I want to achieve is: to load the stimulsoft.*.js dynamically using hooks - because the library is big and not all pages need to use it.

I tried using the hook: useEffect() to try loading the script dynamically.

But the resulting object is not something I can use: the object Stimulsoft.Viewer only have 1 property called 'script' (no 'StiViewerOptions', no 'StiReport' etc) please refer to attachment.

Thanks !
Attachments
stimulsoft-dynamically-loaded.png
stimulsoft-dynamically-loaded.png (4.25 KiB) Viewed 9383 times
Lech Kulikowski
Posts: 6197
Joined: Tue Mar 20, 2018 5:34 am

Re: React functional component

Post by Lech Kulikowski »

Hello,

All available samples, you can find here
https://github.com/stimulsoft/Samples-JS
we do not have other samples.

Thank you.
elramon1
Posts: 1
Joined: Thu Aug 05, 2021 10:10 am

Re: React functional component

Post by elramon1 »

Lech Kulikowski wrote: Thu Jun 18, 2020 7:27 am Hello,

All available samples, you can find here
https://github.com/stimulsoft/Samples-JS
we do not have other samples.

Thank you.
and maybe thinking about working on new examples?? We are in 2021 and React functional components are the standard. If you are not working for your new users nobody is gonna use your tools anymore. I am an example.
bad work :thumbdown
Andrew
Posts: 4104
Joined: Fri Jun 09, 2006 3:58 am

Re: React functional component

Post by Andrew »

Hello,

I regret to say but this is true, we do not have a full support for React. We have pure JS and for use in React. This can only be used as a JS library.

Thank you.
nicoletjunior
Posts: 1
Joined: Wed Oct 04, 2023 12:29 pm

Re: React functional component

Post by nicoletjunior »

Certainly! You can use a React functional component to dynamically load the Stimulsoft library and use the Viewer component. Here's an example of how you can achieve this using React hooks, specifically the useEffect hook:

import React, { useEffect, useState } from 'react';

const StimulsoftViewer = () => {
const [viewerLoaded, setViewerLoaded] = useState(false);

useEffect(() => {
// Load Stimulsoft Viewer script dynamically
const script = document.createElement('script');
script.src = 'path/to/stimulsoft.viewer.js'; // Replace with the actual path

script.onload = () => {
// The script has loaded, initialize the Viewer
const viewer = new Stimulsoft.Viewer.StiViewer(null, 'StiViewer', false);

// You can now use the viewer object and set options, load reports, etc.
// Example:
viewer.report = new Stimulsoft.Report.StiReport();
viewer.report.loadFile('path/to/your/report.mrt'); // Replace with the actual report file

// Set viewer options if needed
// viewer.options.someOption = 'someValue';

// Now, you can render the Viewer
viewer.renderHtml('viewer-container'); // Replace 'viewer-container' with your container element's ID

setViewerLoaded(true);
};

document.body.appendChild(script);

return () => {
// Cleanup when the component unmounts
document.body.removeChild(script);
};
}, []);

return (
<div>
{viewerLoaded ? (
<div id="viewer-container">
{/* The Stimulsoft Viewer will be rendered here */}
</div>
) : (
<div>Loading Stimulsoft Viewer...</div>
)}
</div>
);
};

export default StimulsoftViewer;
Lech Kulikowski
Posts: 6197
Joined: Tue Mar 20, 2018 5:34 am

Re: React functional component

Post by Lech Kulikowski »

Hello,

Thank you for the information.
mrapi
Posts: 277
Joined: Sat Dec 20, 2008 1:08 am

Re: React functional component

Post by mrapi »

or

Code: Select all

import { useEffect } from "react";
import { Stimulsoft } from 'stimulsoft-reports-js/Scripts/stimulsoft.viewer';

const viewer = new Stimulsoft.Viewer.StiViewer(undefined, 'StiViewer', false);
const report = new Stimulsoft.Report.StiReport();

export default function Raport  ()  {
    useEffect(() => {
        async function fetchData() {
            const response = await fetch('/reports/Report.mdc');
            const data = await response.json();
            report.loadDocument(data);
            viewer.report = report;
            viewer.renderHtml('viewer');
        }
        fetchData();

    }, []);

    return (

        <div id="viewer" className="App"></div>


    )
}
Lech Kulikowski
Posts: 6197
Joined: Tue Mar 20, 2018 5:34 am

Re: React functional component

Post by Lech Kulikowski »

Hello,

Thank you for the information.
Post Reply