# Loading the VTK file

**URL:** https://discourse.vtk.org/t/loading-the-vtk-file/13075
**Category:** Web
**Tags:** code, vtkjs
**Created:** [January 15, 2024, 9:36am UTC](https://discourse.vtk.org/t/loading-the-vtk-file/13075 "2024-01-15T09:36:06Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![sasan\_bahrieh](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sasan_bahrieh/32/7779_2.png) [@sasan\_bahrieh](https://discourse.vtk.org/u/sasan_bahrieh)
#### Post date: [January 15, 2024, 9:36am UTC](https://discourse.vtk.org/t/loading-the-vtk-file/13075/1 "2024-01-15T09:36:06Z")

</div>

I wrote the following code to be able to load the VTK file, but the page is white and the geometry is not visible.  
Also I get this message in the console:“VTK container ref is not defined.”

```auto
import React, { useEffect, useRef, useState } from 'react';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';

function VTKViewer() {
    const vtkContainerRef = useRef(null);
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        if (!vtkContainerRef.current) {
            console.warn('VTK container ref is not defined.');
            return;
        }

        setIsMounted(true);

        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
            rootContainer: vtkContainerRef.current,
            containerStyle: { height: '100%', width: '100%' },
        });

        const renderer = fullScreenRenderer.getRenderer();
        const renderWindow = fullScreenRenderer.getRenderWindow();

        const actor = vtkActor.newInstance();
        const mapper = vtkMapper.newInstance();
        actor.setMapper(mapper);

        const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
        mapper.setInputConnection(reader.getOutputPort());

        reader.setUrl('/home/sample/test.vtk').then(() => {
            renderer.addActor(actor);
            renderer.resetCamera();
            renderWindow.render();
        });

        return () => {
            fullScreenRenderer.delete();
        };
    }, []);

    return isMounted ? <div ref={vtkContainerRef} style={{ width: '100%', height: '100%' }} /> : null;
}

export default VTKViewer;

```

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [January 15, 2024, 9:46am UTC](https://discourse.vtk.org/t/loading-the-vtk-file/13075/2 "2024-01-15T09:46:03Z")

</div>

Do not forget to load a [profile](https://kitware.github.io/vtk-js/api/Rendering_OpenGL_Profiles.html) file

---

<div class="post-metadata">

### Author: ![sasan\_bahrieh](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sasan_bahrieh/32/7779_2.png) [@sasan\_bahrieh](https://discourse.vtk.org/u/sasan_bahrieh)
#### Post date: [January 16, 2024, 8:47am UTC](https://discourse.vtk.org/t/loading-the-vtk-file/13075/3 "2024-01-16T08:47:43Z")

</div>

Thanks for your response. I didn’t get your point. Can you explain more?

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [January 16, 2024, 9:07am UTC](https://discourse.vtk.org/t/loading-the-vtk-file/13075/4 "2024-01-16T09:07:18Z")

</div>

Please import the Geometry profile:

> <https://github.com/Kitware/vtk-js/blob/master/Examples/Applications/GeometryViewer/index.js#L7>

---

<div class="post-metadata">

### Author: ![Ossama\_Elbelamachi](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ossama_elbelamachi/32/8074_2.png) [@Ossama\_Elbelamachi](https://discourse.vtk.org/u/Ossama_Elbelamachi)
#### Post date: [January 16, 2024, 4:12pm UTC](https://discourse.vtk.org/t/loading-the-vtk-file/13075/5 "2024-01-16T16:12:44Z")

</div>

You should add vtkContainerRef to the useEffect dependecies because what you are doing is running the useEffect for the first render and it will not trigger again what it’s inside I hope that could solve your problem

```auto
useEffect(()=>{ 
//... 
//your code 
//..
}, [vtkContainerRef])

```

[EDITTED]  
and try to install the kitware package “@kitware/vtk.js”: “^29.1.3”  
your import should be something like that  
also add the geometry as @finetjul said

```auto
import "@kitware/vtk.js/Rendering/Profiles/Geometry";
import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkHttpDataSetReader from "@kitware/vtk.js/IO/Core/HttpDataSetReader";
import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";

```

that’s works for me I’m using react to