.getBoundingClientRect() of arrow

[pmorim]

Is your feature request related to a problem? Please describe. I'm trying to get the .getBoundingClientRect() of the <XArrow /> component so that I can get its width, height, etc... The problem is that there is no way - that I know of - to get a ref of the Arrow.

Describe the solution you'd like There should be a way to add a ref to the <XArrow /> component This can be achieved by defining the <XArrow /> component with forwardRef.

Edit: If you pass a ref to SVGcanvasProps or arrowBodyProps you get an error on the console.

Describe alternatives you've considered I tried applying the ref to a wrapping div (see code below) as a work-around, but it did not work.

const App = () => {
  const ref = useRef()
  // ...

  return (
    <div ref={ref}>
      <XArrow start={start} end={end} />
    </div>
  )
}

[Eliav2]

You don't want to forward ref, you probably want to pass ref to the div container. Go ahead and try passing ref to divContainerProps. Please read advanced customization

[pmorim]

@Eliav2, I already had tried doing that, but I always got an error on the console:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null The above error occurred in the \ component

Besides that, the rect would come with { ..., width: 0, height: 0 }.

Here is a CodeSandbox that shows what is happening: https://codesandbox.io/s/react-xarrows-bug-arrow-ref-z1tkr?file=/src/Connection.jsx.

Edit: I noticed that the error does not show because I call .getBoundingClientRect()... It happens just because I am passing a ref to divContainerProps or arrowBodyProps.

[Eliav2]

To get the size of the arrow you should pass ref to svgprops Does you solved the issue?

[pmorim]

Sorry for the long wait...

There isn't any prop named svgprops on XArrow. Could you provide the fix in a fork of the CodeSandbox that I specified above?

[Eliav2]

SVGcanvasProps

[pmorim]

In the CodeSandbox that I shared, I had already tried using that

[Eliav2]

oh yeah.. you can't pass this prop because you overwrite 'ref' which is used internally by react-xarrow ... this means that in the current version you can not access the ref. there might be a way around it and I will think about it for next release.

[joealden]

@Eliav2 is there any update you can give on the progress of v3? I'm also wanting to access the underlying <path> via a ref, as I'm needing to animate an element along the path that react-xarrows generates (so I need to be able to access its d value).

[LucaH612]

@joealden you can access all properties of the Xarrow-SVG by giving a ref to a parent div. Then you will just have to get the child of the div, and you can access all dimensions, path, etc.

[joealden]

@LucaH612 indeed - and this is how I worked around this, but I think it'd be better if this was exposed by react-xarrows, as it'd avoid some of the logic I need to have in an effect handler (as the path will change on container resize etc.), and I think it'd mean less type casting in TypeScript!