useSpotlight

import { useSpotlight } from '@tour-kit/core';

function CustomOverlay() {
  const { isVisible, targetRect, overlayStyle } = useSpotlight();

  if (!isVisible) return null;

  return (
    <div style={overlayStyle} className="spotlight-overlay">
      {/* Custom spotlight rendering */}
    </div>
  );
}

const { show, hide } = useSpotlight();

// Highlight an element manually
const element = document.getElementById('my-element');
show(element, { padding: 16, borderRadius: 8 });

// Hide spotlight
hide();

function CustomSpotlight() {
  const { isVisible, targetRect, padding } = useSpotlight();

  if (!isVisible || !targetRect) return null;

  const cutoutStyle = {
    position: 'absolute',
    top: targetRect.top - padding,
    left: targetRect.left - padding,
    width: targetRect.width + padding * 2,
    height: targetRect.height + padding * 2,
  };

  return (
    <div className="spotlight-overlay">
      <div style={cutoutStyle} className="spotlight-cutout" />
    </div>
  );
}