C15T Logo

React Quickstart

Learn how to integrate c15t into your React application with this step-by-step guide. We'll cover installation, configuration, and basic usage.

tocOn this page

You can get started with the @c15t/cli which will generate the code for you!

npx @c15t/cli generate

Manual Setup

Install @c15t/react Package

npm install @c15t/react

Add to Your Application

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

function App() {
  return (
    <ConsentManagerProvider options={{  
      mode: 'c15t', 
      backendURL: "https://your-instance.c15t.dev",
      consentCategories: ['necessary', 'marketing'], // Optional: Specify which consent categories to show in the banner. 
      ignoreGeoLocation: true, // Useful for development to always view the banner.
    }}>
      <div className="App">
        {/* Your application content */}
      </div>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}

export default App;

We recommend using the hosted solution with consent.io to store your consent.