Custom canvas outer gives forwardRef error

[sujitykulkarni]

I created a custom outer canvas in a separate component file. (And I am not using styled-component package)

import * as React from "react";
import { ICanvasOuterDefaultProps } from "@mrblenny/react-flow-chart";

export const CustomCanvas: React.FunctionComponent<
  ICanvasOuterDefaultProps
> = props => (
  <div
    style={{
      background: "red"
    }}
  />
)

and passing it as a CanvasOuter property of Components prop of the FlowChart in another component file like this

<FlowChart
          chart={chart}
          callbacks={stateActions}
          config={{
            snapToGrid: true
          }}
          Components={{ NodeInner: CustomNodeInner, CanvasOuter: CustomCanvas }}
 />

which does not load the FlowChart throws this error

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `CanvasWrapper`.
    in CustomCanvas (created by CanvasWrapper)
    in CanvasWrapper
    in Unknown (at src/index.tsx:60)
    in div (at src/index.tsx:47)
    in App (at src/index.tsx:74)

Working: https://codesandbox.io/s/react-flow-chart-poc-2bcze

What could be gone wrong?

[fenech]

Canvas.Wrapper passes a ref to your custom component, which you should forward to the DOM component inside your CustomCanvas component:

export const CustomCanvas = React.forwardRef(
  (props: ICanvasOuterDefaultProps, ref: React.Ref<HTMLDivElement>) => (
    <div
      ref={ref}
      style={{
        background: "red"
      }}
    />
  )
)

This ref is used in Canvas.Wrapper to determine the size and position of the canvas.