Custom components using react-konva

[hirune924]

Now I am developing a custom component having drawing functionality using react-konva.
However, I am facing a problem with Stage not rendering. Can someone please help me?

import {
  Streamlit,
  withStreamlitConnection,
  ComponentProps
} from "streamlit-component-lib"
import React, { useEffect, useState } from "react"
import { ChakraProvider, Select, Flex, Box, Spacer, VStack, HStack, Center} from '@chakra-ui/react'

import { Stage, Image, Layer, Rect, Text } from 'react-konva';
import useImage from 'use-image';

export interface PythonArgs {
  image_url: string
}

const Sample= ({ args }: ComponentProps) => {
  const {
    image_url,
    }: PythonArgs = args

  useEffect(() => {
      Streamlit.setFrameHeight(1000)
    }, [])

  return (

                  <Stage  width={300} height={200} >
                    <Layer>
                      <Text text="Some text on canvas" fontSize={15} />
                      <Rect fill='red' width={300} height={200} />
                    </Layer>
                  </Stage>

      )
}
export default withStreamlitConnection(Sample)

"dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "framer-motion": "^4.1.17",
    "konva": "^8.4.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-konva": "^16.13.0-6",
    "react-scripts": "3.4.1",
    "streamlit-component-lib": "^1.3.0",
    "typescript": "^4.2.0",
    "use-image": "^1.1.0",
    "yarn": "^1.22.19"
  }

[hirune924]

I have confirmed that adding Stage renders the div. But the inside of it is empty. It looks like the child elements of Stage are not rendered…

[hirune924]

I noticed that the problem is due to this Issue. when I add streamlit-component-lib, konva stops working.

Update apache-arrow dependency on streamlit-component-lib.