InsightSoftwareConsortium / InsightSoftwareConsortium/itkwidgets

itkwidgets for javascript

Open
#668 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
Python
Stars
624
Forks
83
PR merge metrics
No merged PRs in 30d

Description

Hi,
I am trying to use itkwidgets in my react app, I found the itkwidgets package here `https://npm.io/package/itkwidgets`. After I install itkwidgets in my react app, I can import the viewer etc in a js file, the js file is like below
```
import {
ViewerModel,
ViewerView,
LineProfilerModel,
LineProfilerView
} from "itkwidgets";

import {
Grid
} from "@mui/material";
export const LiveViewer=()=>{
return ()
}
```
Then, I import LiveViewer in another tsx file and use the LiveViewer component defined above,
```
import React, { useEffect, useState, useRef, useMemo } from "react";
// import { useStyles } from "./Monitoring.styles";
import { useTheme } from "@mui/material/styles";
import {
Box,
Typography,
Grid,
Snackbar,
Alert,
avatarClasses,
Stack,
Button,
} from "@mui/material";

import {LiveViewer} from "./LiveViewer";

const Monitoring = () => {

return (







);
};
export default Monitoring;
```
I got the following errors, is itkwidgets compatible with typescript?

```
ERROR in ./node_modules/itk-vtk-viewer/src/UserInterface/icons/length-tool.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
5 | ...props
6 | }, svgRef) {
> 7 | return

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.