title: React hooks: referencing the parent of a component
body: <p>I'm creating a custom mouse cursor per component (e.g. a custom mouse cursor on a figure element). I'm writing a custom hook for this. This is the hook so far:</p>
  
  <pre><code>const useMouseCoords = () =&gt; {
    let [coords, setCoords] = useState({ x: 0, y: 0 })
  
    // I need to calculate the coordinates from the parents offset. Here is where I'm stuck. 
    let offsetParent = parentRef.current.getBoundingClientRect()
  
    function handleCoords(e) {
      setCoords({
        x: e.clientX - offsetParent.x,
        y: e.clientY - offsetParent.y,
      })
    }
  
    useEffect(() =&gt; {
      if (typeof window === `undefined`) return // escape gatsby build process
  
      window.addEventListener('mousemove', handleCoords)
  
      return () =&gt; {
        window.removeEventListener('mousemove', handleCoords)
      }
    }, [])
  
    return coords
  }
  </code></pre>
  
  <p>The mousecursor component is quite simple:</p>
  
  <pre><code>const MouseCursor = (props) =&gt; {
    let { x, y } = useMouseCoords()
  
    return (
      &lt;div
        className="mouse-cursor-button"
        style={{
          transform: `translate(${x}px, ${y}px)`,
        }}
      &gt;
        &lt;div className="mouse-cursor-button__text"&gt;Click to play&lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Code of course doesn't work but is rather to illustrate what I'm trying to achieve.</p>
  
  <p>So I need the parent of the MouseCursor component to calculate the offset. I'm stuck at the part where I want to reference the parent component. I was hoping I could pass it as an argument to the hook. </p>
  
  <p>So the question is how can I access the parent component in the hook?</p>