# vtkImageCroppingWidget question with react

**URL:** https://discourse.vtk.org/t/vtkimagecroppingwidget-question-with-react/10903
**Category:** Web
**Created:** [March 6, 2023, 9:13pm UTC](https://discourse.vtk.org/t/vtkimagecroppingwidget-question-with-react/10903 "2023-03-06T21:13:25Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![GraphicsDeveloper3D](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/g/f07891/32.png) [@GraphicsDeveloper3D](https://discourse.vtk.org/u/GraphicsDeveloper3D)
#### Post date: [March 6, 2023, 9:13pm UTC](https://discourse.vtk.org/t/vtkimagecroppingwidget-question-with-react/10903/1 "2023-03-06T21:13:25Z")

</div>

Hello forum, I have a question for cropping widget in react:  
In the following code, the cropping widget does not show up. Do I need to bind the widget to any div?

Is there any code sample that I can look into? I wrote the code from [cropping widget example](https://kitware.github.io/vtk-js/examples/ImageCroppingWidget.html)

Thanks in advance!!

import { useRef, useEffect } from ‘react’;  
import ‘@kitware/vtk.js/Rendering/Profiles/Volume’;  
import vtkImageData from ‘@kitware/vtk.js/Common/DataModel/ImageData’;  
import vtkColorMaps from “@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps”;

import vtkFullScreenRenderWindow from ‘@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow’;  
import vtkVolume from ‘@kitware/vtk.js/Rendering/Core/Volume’;  
import vtkVolumeMapper from ‘@kitware/vtk.js/Rendering/Core/VolumeMapper’;  
import vtkDataArray from ‘@kitware/vtk.js/Common/Core/DataArray’;  
import vtkColorTransferFunction from ‘@kitware/vtk.js/Rendering/Core/ColorTransferFunction’;  
import vtkPiecewiseFunction from ‘@kitware/vtk.js/Common/DataModel/PiecewiseFunction’;

import vtkImageCroppingWidget from ‘@kitware/vtk.js/Widgets/Widgets3D/ImageCroppingWidget’;  
import vtkImageCropFilter from ‘@kitware/vtk.js/Filters/General/ImageCropFilter’;  
import vtkWidgetManager from ‘@kitware/vtk.js/Widgets/Core/WidgetManager’;

const MAX = 100;

function App() {  
const vtkContainerRef = useRef(null);  
const context = useRef(null);

useEffect(() =\> {  
if (!context.current) {  
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({  
background: [.1, .2, 1],  
rootContainer: vtkContainerRef.current  
});

```
  const actor = vtkVolume.newInstance();
  const mapper = vtkVolumeMapper.newInstance();

  actor.setMapper(mapper);
  const lookupTable = vtkColorTransferFunction.newInstance();
  const piecewiseFun = vtkPiecewiseFunction.newInstance();
  lookupTable.applyColorMap(vtkColorMaps.getPresetByName('Cool to Warm'));

  lookupTable.setMappingRange(0, 256);
  lookupTable.updateRange();
  for (let i = 0; i <= 8; i++) {
    piecewiseFun.addPoint(i * 32, i / 8);
  }

  actor.getProperty().setRGBTransferFunction(0, lookupTable);
  actor.getProperty().setScalarOpacity(0, piecewiseFun);

  const float32 = new Float32Array(MAX * MAX * MAX);
  let idx = 0;

  for (let i = 0; i < MAX; i++) {
    for (let j = 0; j < MAX; j++) {
      for (let k = 0; k < MAX; k++) {
        float32[idx++] = i * 10 % 256;
      }
    }
  }

  const imageData = vtkImageData.newInstance({
    origin: [0, 0, 0],
    spacing: [1, 1, 1],
    direction: [1, 0, 0, 0, 1, 0, 0, 0, 1]
  })

  const dataArray = vtkDataArray.newInstance({
    name: 'Data',
    values: float32
  });

  imageData.getPointData().setScalars(dataArray);
  imageData.setDimensions([MAX, MAX, MAX]);
  console.log(imageData.getPointData().getScalars().getRange())
  const renderer = fullScreenRenderer.getRenderer();
  const renderWindow = fullScreenRenderer.getRenderWindow();
  renderer.addVolume(actor);

  //Cropping code
  const widgetManager = vtkWidgetManager.newInstance();
  widgetManager.setRenderer(renderer);
  const widget = vtkImageCroppingWidget.newInstance();
  const viewWidget = widgetManager.addWidget(widget);
  const cropFilter = vtkImageCropFilter.newInstance();
  const cropState = widget.getWidgetState().getCroppingPlanes();
  cropState.onModified(() =>
    cropFilter.setCroppingPlanes(cropState.getPlanes())
  );
  cropFilter.setInputData(imageData);
  mapper.setInputConnection(cropFilter.getOutputPort());
  widgetManager.enablePicking();
  //end Cropping code

  const range = imageData.getPointData().getScalars().getRange();
  lookupTable.setMappingRange(...range);
  lookupTable.updateRange();

  renderer.resetCamera();
  renderWindow.render();
  context.current = {
    fullScreenRenderer,
    renderWindow,
    renderer,
    actor,
    mapper,
    imageData
  };
}

return () => {
  if (context.current) {
    const { fullScreenRenderer, actor, mapper, imageData } = context.current;
    actor.delete();
    mapper.delete();
    fullScreenRenderer.delete();
    imageData.delete();
    context.current = null;
  }
};

```

}, [vtkContainerRef]);

return (

```
<div ref={vtkContainerRef} />

```

);  
}

export default App;

---

<div class="post-metadata">

### Author: ![Xoz](https://discourse.vtk.org/user_avatar/discourse.vtk.org/xoz/32/5714_2.png) [@Xoz](https://discourse.vtk.org/u/Xoz)
#### Post date: [March 7, 2023, 8:41am UTC](https://discourse.vtk.org/t/vtkimagecroppingwidget-question-with-react/10903/2 "2023-03-07T08:41:13Z")

</div>

Try to add `import '@kitware/vtk.js/Rendering/Profiles/Geometry'` and `import '@kitware/vtk.js/Rendering/Profiles/Glyph'` at the beginning, or just add `import '@kitware/vtk.js/Rendering/Profiles/All'`

---

<div class="post-metadata">

### Author: ![GraphicsDeveloper3D](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/g/f07891/32.png) [@GraphicsDeveloper3D](https://discourse.vtk.org/u/GraphicsDeveloper3D)
#### Post date: [March 7, 2023, 6:12pm UTC](https://discourse.vtk.org/t/vtkimagecroppingwidget-question-with-react/10903/3 "2023-03-07T18:12:55Z")

</div>

Thanks!!! that worked!