arrows don't re-render correctly

[mohdmujahithali]

After initial rending the arrow lines appear correctly as shown below

After opened the accordion of some portion, arrow lines get collapsed and shown as like below,

Also, while scrolling, arrow lines get collapsed and shown as like below,

I saw that there is an instance method "refreshScreen" need to be call, when the onscroll event happening. But there is clear documentation regarding that method how to call it? So, could you please provide the working example for "refreshScreen" instance method

Another example

after initial rendering,

after opened the accordion,

let me know the working example that how to use instance method "refreshScreen" here.

[pierpo]

Hi!

Thank you for the detailed issue.

Can you try calling refreshScreen when your screen moves? For example, if you collapse/uncollapse an accordion, then call refreshScreen afterwards.

const archerRef = useRef()

useEffect(() => {
  archerRef.refreshScreen()
}, [isOpen])

return <ArcherContainer ref={archerRef}>...</ArcherContainer>

[mohdmujahithali]

@pierpo

I declared reference as below,

const archerRef = useRef();

Then I got the below error

So, I declared reference with null as below,

const archerRef = useRef(null);

Then I got the error for "refreshScreen" function call

Does we need to import anything for "refreshScreen" method?

[pierpo]

This is only a type error, I think it would work at runtime.

To solve your error:

// (note: this import does not look good indeed, it needs a fix on the lib's side)
import { ArcherContainerHandle } from 'react-archer/lib/ArcherContainer/ArcherContainer.types';

// ...
const archerRef = useRef<ArcherContainerHandle>(null);

The method does exist, it's only your typing that is wrong 😉

[lucfranken]

In case one is searching, the example above is in general correct but your state var might changes earlier in the process causing undefined variable issues.

const archerRef = useRef<ArcherContainerHandle>(null);

  import { ArcherContainerHandle } from 'react-archer/lib/ArcherContainer/ArcherContainer.types';

    useEffect(() => {
        if (archerRef?.current) {
            archerRef.current.refreshScreen()
        }
    }, [zoomLevel]);

Checking for the availability of the ref might help.