# Displaying vtk files on electron(Node.js) application

**URL:** https://discourse.vtk.org/t/displaying-vtk-files-on-electron-node-js-application/7856
**Category:** Web
**Created:** [February 16, 2022, 9:40pm UTC](https://discourse.vtk.org/t/displaying-vtk-files-on-electron-node-js-application/7856 "2022-02-16T21:40:20Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Saquan\_Anthony](https://discourse.vtk.org/user_avatar/discourse.vtk.org/saquan_anthony/32/4707_2.png) [@Saquan\_Anthony](https://discourse.vtk.org/u/Saquan_Anthony)
#### Post date: [February 16, 2022, 9:40pm UTC](https://discourse.vtk.org/t/displaying-vtk-files-on-electron-node-js-application/7856/1 "2022-02-16T21:40:20Z")

</div>

Hello,  
I’m developing an application using Electron and one of the key features is being able to read/display vtk/vtu files. Playing around with VTK.js and react and I think I’m close to doing it but I’m not sure what exactly to return.

```auto
import React from 'react';
import { useState, useRef, useEffect } from 'react';

import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkPolyDataReader from '@kitware/vtk.js/IO/Legacy/PolyDataReader';

// eslint-disable-next-line react/prefer-stateless-function
class LoadVTK extends React.Component {
  render() {
    const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
    const renderer = fullScreenRenderer.getRenderer();
    const renderWindow = fullScreenRenderer.getRenderWindow();

    const resetCamera = renderer.resetCamera;
    const render = renderWindow.render;

    const reader = vtkPolyDataReader.newInstance();
    reader.setUrl('skin.vtk').then(() => {
      const polydata = reader.getOutputData(0);
      const mapper = vtkMapper.newInstance();
      const actor = vtkActor.newInstance();

      actor.setMapper(mapper);
      mapper.setInputData(polydata);

      renderer.addActor(actor);

      resetCamera();
      render();

    });

    return (
      <div></div>
    );
  }
}

export default LoadVTK;

```

Not exactly sure what tags/information to return.  
Followed this post: [reactjs - VTK.js, React, JavaScript: Load VTK files - Stack Overflow](https://stackoverflow.com/questions/48907794/vtk-js-react-javascript-load-vtk-files)  
And also following this doc: [Using vtk.js with React | vtk.js](https://kitware.github.io/vtk-js/docs/vtk_react.html#Using-vtk-js-in-your-app)

The issue is probably very simple but I’m not well versed with these tags. Any help or points to the right direction would be greatly appreciated.

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [February 16, 2022, 9:50pm UTC](https://discourse.vtk.org/t/displaying-vtk-files-on-electron-node-js-application/7856/2 "2022-02-16T21:50:51Z")

</div>

`vtkFullScreenRenderWindow` adds a div element to the body, so it won’t render into your component, per-say.

If you are trying to render a vtk.js viewport with a component, here is the typical approach:

1. Return a referenceable container element from your render function
2. use `vtkRenderWindow` and `vtkRenderer` to set up your viewport, or use vtkFullScreenRenderWindow and pass in a rootContainer
3. Once the reader loads your data, add the actor into the scene

A direct translation of the second doc you linked from react hooks to class component should get you on the right track.