How do I develop with vtk.js using React

Web
1

Hello,
I’m a university student currently doing my thesis. I will be using vtk.js to visualize .nii.gz files on the web. I’m not that good with pure JavaScript, but I am good enough with developing basic websites using React.

I wanted to ask, I found two projects - react-vtk-js and react-vtkjs-viewport, both of which look really awesome, since they hide the complex and hard to understand logic of vtk.js behind components. Only issue is, both of these libraries use an old version of React, which didn’t even support hooks. Are there any alternatives to these packages, or am I stuck with learning the whole vtk.js library and trying to figure it out by myself to get it working with the newest React?

Thanks in advance.

2

I had the same concern.

I am organizing the structure in the direction of avoiding the life cycle of Hooks as much as possible.

If useState is overused, instances of vtk may continue to be created, so be careful.

I used useState only for DataFetch and processed the rest with useRef.

The role of the react was made to be used only in DOM.

In addition, we need to come up with a way to share common objects between components. (RenderWindow, Renderer, WidgetManager, …etc)

3

react-vtk-js should be able to work with newer version of react (as peer dep) but I might be wrong.

4

Hello @Sebastien_Jourdain, Thanks for helping out with VTK problems. I am a new to Vtk-React. I am trying to incorporate vtk code from Using vtk.js with React & Typescript (forked) - CodeSandbox into an existing React project but it keep coming up in full-screen mode and not giving room to other component to display please how can i resolve this.

5

vtkFullScreenRenderWindow is meant to be fullscreen like its name suggest. If you want to control the container part you should look at what that example is doing and you can see its usage with react here and here.

HTH