Troubleshooting

My arrows don't re-render correctly

Try using the refreshScreen instance method on your ArcherContainer. You can access it through the ref of the component.

Call refreshScreen when the event you need is triggered (onScroll, etc.):

import { useRef } from 'react';
import { ArcherContainer, ArcherContainerRef } from 'react-archer';

function App() {
  const archerRef = useRef<ArcherContainerRef>(null);

  return (
    <div onScroll={() => archerRef.current?.refreshScreen()}>
      <ArcherContainer ref={archerRef}>{/* ... */}</ArcherContainer>
    </div>
  );
}