Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeScript compliant Ref handling for animating the movement of arrows

See original GitHub issue

In trying to achieve animation of arrows on div scrolling, I ran into a couple of issues. I achieved this:

PYPHnYu5DH

But through some scullduggery.

I extended the ArcherContainerProps interface to contain:

  ref?: any

  forceUpdate?: () => void

So that I could grab the reference to the archer container and also forceUpdate the component (not sure why I couldn’t access these generic react props?)

Then I attached the event listeners to my divs and on scroll I forceUpdate the component.

export default class Space extends Component<Props, State> {
  state = {
    currentSelectionIdx: 0,
  }
  baseSpaceRef = React.createRef<HTMLDivElement>()
  linkSpaceRef = React.createRef<HTMLDivElement>()
  archerContainerRef = React.createRef<ArcherContainerProps>()

  componentDidMount = () => {
    this.baseSpaceRef.current &&
      this.baseSpaceRef.current.addEventListener('scroll', this.isScrolling)
    this.linkSpaceRef.current &&
      this.linkSpaceRef.current.addEventListener('scroll', this.isScrolling)
  }

  componentWillUnmount = () => {
    this.baseSpaceRef.current &&
      this.baseSpaceRef.current.removeEventListener('scroll', this.isScrolling)
    this.linkSpaceRef.current &&
      this.linkSpaceRef.current.removeEventListener('scroll', this.isScrolling)
  }

  isScrolling = () => {
    this.archerContainerRef!.current!.forceUpdate()
  }

  render() {
    return (
      <div>
        <ArcherContainer ref={this.archerContainerRef}>
          <div className="space">
            <div className="baseSpace" ref={this.baseSpaceRef}>
              {this.baseCards()}
            </div>
            <div className="linkedSpace" ref={this.linkSpaceRef}>
              {this.linkedCards()}
            </div>
          </div>
        </ArcherContainer>
      </div>
    )
  }
}

It feels hacky though.

I was wondering if you could supply the typescript compliant functionality? It may not need a new feature, just I haven’t found it yet.