Components

DevTools

DevTools is a floating panel that shows the internal state of the consent manager. Use it during development to inspect consent values, geolocation results, loaded scripts, and debug consent flows. Also exported as C15TDevTools if you need to avoid naming conflicts with other devtools.

Installation

DevTools lives in a separate package to keep it out of production bundles:

bun add -D @c15t/dev-tools

Usage

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { DevTools } from '@c15t/dev-tools/react';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider options={{ mode: 'hosted', backendURL: '/api/c15t' }}>
      {children}
      {process.env.NODE_ENV === 'development' && <DevTools />}
    </ConsentManagerProvider>
  );
}

Configuration

<DevTools
  position="bottom-right"  // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  defaultOpen={false}       // Start with panel open
  namespace="c15tStore"     // Store namespace to connect to
  disabled={false}          // Disable without removing from tree
/>

Panels

PanelWhat it shows
ConsentsCurrent consent state for all categories
LocationDetected jurisdiction, country, region, and consent model
ScriptsConfigured scripts and their load status
IABIAB TCF state (when enabled) - TC string, vendor consents, purposes
EventsTimeline of consent events and state changes
ActionsButtons to trigger consent actions (accept all, reject all, reset)

TanStack Devtools

@c15t/dev-tools/tanstack exposes a panel component and plugin factory that match TanStack Devtools' plugin API, so c15t can sit beside Query and Router without a custom mount adapter:

import * as React from 'react';
import { useRouter } from '@tanstack/react-router';
import { TanStackDevtools } from '@tanstack/react-devtools';
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import { c15tDevtools } from '@c15t/dev-tools/tanstack';

export function AppDevtools() {
  const router = useRouter();

  return (
    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel router={router} />,
        },
        c15tDevtools(),
      ]}
    />
  );
}

Props

Warning: ExtractedTypeTable: Could not extract "C15TDevToolsProps" from "./packages/dev-tools/src/react.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…