Horizontal scrolling with react-xarrows

[shradha0810]

I am creating a horizontally scrollable div with elements like buttons and using react-xarrows to connect those elements. But when I scroll the div. buttons are moving but the arrows are stuck where they were rendered. I understand I have to call useXarrows() to the element on whose rendering arrows are dependent, but I cannot call the said hook on buttons since I am calling them using the map callback function. Is there a workaround for this issue.

<div className="row w-100" style={{ overflowX: "auto" }}>
          <div
            style={{
              display: "inline-block",
              textAlign: "center",
              whiteSpace: "nowrap",
            }}
            onLoad={useXarrow()}
          >
            {arr.map((e, index) => {
              if (index + 1 < arr.length) {
                return (
                  <>
                    <Xwrapper>
                      <button
                        type="button"
                        className="btn version-button"
                        value={e}
                        id={e}
                        onLoad={updateXarrow}
                      >
                        {e}
                      </button>

                      <Xarrow
                        key={index}
                        start={e}
                        end={arr[index + 1]}
                        color="black"
                        path="smooth"
                        headSize={3}
                        dashness={true}
                        strokeWidth={2}
                      />
                    </Xwrapper>
                  </>
                );
              } else {
                return (
                  <button
                    type="button"
                    className="btn version-button"
                    value={e}
                    id={e}
                  >
                    {e}
                  </button>
                );
              }
            })}
          </div>
        </div>

[dmMarko]

I'm also experiencing this issue. It occurs to me in any scrolling div (both horizontally and vertically)

I was able to resolve it by setting the position: relative to another div (inside the scrolling div), inside which the xarrows are located like so:

<div style={{overflow: "scroll"}}>
  <div style={{position: "relative"}}>
    <Xarrow {...} />
  </div>
</div>

[Audiopolis]

For me, the issue was that the arrows would still be visible when scrolled beyond the bounds of the parent (which has overflow: hidden), but adding position: relative to the parent worked for me as well.

[ShahzaibJak]

I'm also experiencing this issue. It occurs to me in any scrolling div (both horizontally and vertically)

I was able to resolve it by setting the position: relative to another div (inside the scrolling div), inside which the xarrows are located like so:

<div style={{overflow: "scroll"}}>
  <div style={{position: "relative"}}>
    <Xarrow {...} />
  </div>
</div>

Building on this, instead of wrapping the XArrow inside a div, you can directly set the XArrow divContainerStyle.

<Xarrow ..... divContainerStyle={{ position: 'relative' }} />