Frame

Frame conditionally renders its children based on consent state. When consent for the specified category is not granted, a placeholder is shown instead. Children are not mounted at all until consent is given, preventing any network requests or script execution.

Basic Usage

import { Frame } from '@c15t/nextjs';

function YouTubeEmbed() {
  return (
    <Frame category="marketing">
      <iframe
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        width="560"
        height="315"
        allowFullScreen
      />
    </Frame>
  );
}

Custom Placeholder

Replace the default placeholder:

<Frame
  category="experience"
  placeholder={
    <div className="rounded-lg border p-8 text-center">
      <p>This content requires experience cookies.</p>
      <p>Please enable them in your privacy settings.</p>
    </div>
  }
>
  <InteractiveWidget />
</Frame>;

Compound Components

Build fully custom placeholder layouts:

<Frame.Root category="marketing">
  <Frame.Title category="marketing" />
  <Frame.Button category="marketing" />
</Frame.Root>;

• Frame.Root - Container with default placeholder styling
• Frame.Title - Displays a consent-request message with the category name
• Frame.Button - Button that opens the consent dialog for the specified category

Automatic Category Registration

When Frame mounts, it automatically adds its category to the active consentCategories list. This means you don't need to explicitly list the category in your provider's consentCategories option - if a Frame component uses it, it will be registered.

Props