How can you track (using React) that part or all of a component is rendered outside of the user's visible area?

Question

css

There is a component which is located at the right edge. When you click on it, a list expands, part of which is "hidden" outside the visible area. How can this be tracked and prevented?

Answer 1

On componentDidMount get its position via Element.getBoundingClientRect and look at the right property. If it is greater than window.innerWidth, then move the component to the left so that it all fits into the visible area