Horizontal scrolling with react-xarrows

Question

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.

this is my code

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

                      <Xarrow
                        key={index}
                        start={e}
                        end={array[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}
                    //   style={{}}
                  >
                    {e}
                  </button>
                );
              }
            })}
          </div>
        </div>

Answer 1

I came across the same problem recently. The solution that worked for me was to wrap the arrow in a div with relative position, you can use the divContainerStyle prop for this. Here's a sample:

<Xarrow
  start={start}
  end={end}
  divContainerStyle={{ position: "relative" }}
/>