Render Prop Pattern

import { useState, useEffect } from 'react';

interface MousePosition {
  x: number;
  y: number;
}

export function MouseTracker({
  render,
}: {
  render: (pos: MousePosition) => React.ReactNode;
}) {
  const [pos, setPos] = useState<MousePosition>({ x: 0, y: 0 });

  useEffect(() => {
    const handler = (e: MouseEvent) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);

  return <>{render(pos)}</>;
}

// Usage:
// <MouseTracker render={({ x, y }) => <span>({x}, {y})</span>} />