c15t
Documentation

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.

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

Warning: ExtractedTypeTable: Could not extract "FrameProps" from "./packages/react/src/components/frame/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…