AdaptiveProvider

Context provider that manages the adaptive lighting system for all cinematic components.

Basic Usage

Wrap your app or component tree with AdaptiveProvider to enable cinematic lighting effects. All CinematicVideo, CinematicImage, and CinematicCard components must be descendants of this provider.

tsx

import { AdaptiveProvider, CinematicVideo } from "react-cinematic-lighting";

export default function App() {
  return (
    <AdaptiveProvider>
      <CinematicVideo src="video.mp4" preset="youtube" />
    </AdaptiveProvider>
  );
}

Debug Mode

Enable debug logging to see color extraction events, performance metrics, and system status in the console. Useful for development and troubleshooting.

tsx

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

export default function App() {
  return (
    <AdaptiveProvider debug={true}>
      {/* Your app content */}
      {/* Debug logs will appear in console */}
    </AdaptiveProvider>
  );
}

Multiple Components

A single AdaptiveProvider can manage multiple cinematic components simultaneously. Each component operates independently with its own color extraction and effects.

tsx

import { AdaptiveProvider, CinematicVideo } from "react-cinematic-lighting";

export default function App() {
  return (
    <AdaptiveProvider>
      <Header />
      <main>
        <CinematicVideo src="video1.mp4" preset="youtube" />
        <CinematicVideo src="video2.mp4" preset="netflix" />
        <CinematicVideo src="video3.mp4" preset="spotify" />
      </main>
      <Footer />
    </AdaptiveProvider>
  );
}

Props

childrenReact.ReactNoderequired

Your app content that will have access to the adaptive lighting context

debugbooleanoptional

Enable debug logging in the console. Default: false

Important Notes

Provider Requirement

All cinematic components (CinematicVideo, CinematicImage, CinematicCard) and hooks (useAdaptiveItem, useAdaptiveController) must be used within an AdaptiveProvider. Using them outside the provider will result in an error.

Single Provider

You only need one AdaptiveProvider at the root of your app. Avoid nesting multiple providers as it can cause unexpected behavior and performance issues.