C15T Logo

Callbacks

Learn how to use callbacks to respond to c15t events in your React application.

tocOn this page

Implementing Callbacks

src/App.tsx
import { 
  ConsentManagerDialog,
  ConsentManagerProvider,
  CookieBanner,
  type ConsentManagerOptions
} from '@c15t/react';

export default function App() {
  const options: ConsentManagerOptions = {
    mode: 'c15t', 
    backendURL: process.env.REACT_APP_C15T_URL,
    consentCategories: ['necessary', 'marketing'], // Optional: Specify which consent categories to show in the banner. 
    ignoreGeoLocation: true, // Useful for development to always view the banner.
    callbacks: {
      onBannerFetched(response) {
        console.log('Consent banner fetched', response);
      },
      onConsentSet(response) {
        console.log('Consent has been saved', response);
      },
      onError(response) {
        console.log('Error', response);
      },
    },
  };

  return (
    <ConsentManagerProvider options={options}>
      <div className="App">
        {/* Your application content */}
      </div>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}

Available callbacks

onBannerFetched

Called when the consent banner is fetched; not invoked when the banner is in offline mode.

Property
Types

onConsentSet

Called when the consent is set.

Property
Types

onError

Called when an error occurs.

Property
Types