useAdaptiveItem

import { useAdaptiveItem } from "react-cinematic-lighting";

import { useAdaptiveItem } from "react-cinematic-lighting";
import { useRef } from "react";

function VideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const { color, start, stop } = useAdaptiveItem(videoRef, {
    colorExtraction: true,
    fps: 10,
    sampling: 10,
  });

  return (
    <div
      style={{
        background: color 
          ? `radial-gradient(circle, rgba(${color.r}, ${color.g}, ${color.b}, 0.3) 0%, transparent 70%)`
          : "#000",
      }}
    >
      <video ref={videoRef} src="video.mp4" controls />
    </div>
  );
}

function CustomComponent() {
  const elementRef = useRef<HTMLDivElement>(null);
  const { color, start, stop } = useAdaptiveItem(elementRef, {
    extractMode: "computed",
    fps: 8,
    sampling: 15,
    onColorChange: (color) => {
      console.log('Color changed:', color);
      // Update theme, send analytics, etc.
    },
  });

  return (
    <div ref={elementRef}>
      {/* Your content */}
    </div>
  );
}