Consenti

UI Widget — Framework Guides

React

bash
npm install @consenti/ui
ConsentSetup.tsx
tsx
'use client'  // Next.js App Router

import { useEffect } from 'react'
import { ConsentiSetup } from '@consenti/ui'

export function ConsentSetup() {
  useEffect(() => {
    const widget = new ConsentiSetup({
      core: { regulation: 'gdpr', locale: 'en' },
    })
    return () => widget.destroy()
  }, [])

  return null
}

useConsent hook

tsx
import { useConsent } from '@consenti/ui/react'

export function AnalyticsButton() {
  const { hasConsent, consent, showModal } = useConsent()

  if (!hasConsent) {
    return <button onClick={showModal}>Enable Analytics</button>
  }

  const analyticsGranted = consent?.analytics === 'granted'
  return <span>{analyticsGranted ? 'Analytics on' : 'Analytics off'}</span>
}

Next.js App Router

ℹ️The widget accesses document, window, and navigator. Always initialise it in a 'use client' component.
app/layout.tsx
tsx
import { ConsentSetup } from '@/components/ConsentSetup'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ConsentSetup />   {/* 'use client' component */}
        {children}
      </body>
    </html>
  )
}
components/ConsentSetup.tsx
tsx
'use client'

import { useEffect, useRef } from 'react'
import type { ConsentiSetup as WidgetType } from '@consenti/ui'

export function ConsentSetup() {
  const widgetRef = useRef<WidgetType | null>(null)

  useEffect(() => {
    let widget: WidgetType
    import('@consenti/ui').then(({ ConsentiSetup }) => {
      widget = new ConsentiSetup({
        core: { regulation: 'gdpr', locale: 'en', autoHonorGPC: true },
        api: { enabled: true, baseUrl: process.env.NEXT_PUBLIC_API_URL },
      })
      widgetRef.current = widget
    })
    return () => widgetRef.current?.destroy()
  }, [])

  return null
}

Vue 3 / Nuxt

composables/useConsenti.ts
ts
// For Nuxt: wrap in process.client check
import { onMounted, onUnmounted } from 'vue'
import { useConsent } from '@consenti/ui/vue'

export { useConsent }

// Usage in component:
// const { hasConsent, consent, showModal } = useConsent()
app.vue
vue
<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'

let widget: Awaited<typeof import('@consenti/ui')>['ConsentiSetup'] | null = null

onMounted(async () => {
  const { ConsentiSetup } = await import('@consenti/ui')
  widget = new ConsentiSetup({ core: { regulation: 'gdpr' } })
})

onBeforeUnmount(() => widget?.destroy())
</script>

<template>
  <NuxtPage />
</template>

Angular

consent.service.ts
ts
import { Injectable, OnDestroy, inject, PLATFORM_ID } from '@angular/core'
import { isPlatformBrowser } from '@angular/common'

@Injectable({ providedIn: 'root' })
export class ConsentService implements OnDestroy {
  private platformId = inject(PLATFORM_ID)
  private widget: unknown = null

  async init(config = {}) {
    if (!isPlatformBrowser(this.platformId)) return
    const { ConsentiSetup } = await import('@consenti/ui')
    this.widget = new ConsentiSetup({ core: { regulation: 'gdpr' }, ...config })
  }

  ngOnDestroy() {
    (this.widget as { destroy?: () => void })?.destroy?.()
  }
}
app.component.ts
ts
import { Component, OnInit } from '@angular/core'
import { ConsentService } from './consent.service'

@Component({
  selector: 'app-root',
  template: '<router-outlet />',
})
export class AppComponent implements OnInit {
  constructor(private consent: ConsentService) {}

  ngOnInit() {
    this.consent.init()
  }
}

Angular — useConsent service

ts
import { ConsentiService } from '@consenti/ui/angular'

@Component({ ... })
export class MyComponent {
  consent = inject(ConsentiService)

  // consent.hasConsent()
  // consent.showModal()
  // consent.getConsent()
}

Vanilla JS

main.js
js
import { ConsentiSetup } from '@consenti/ui'

const widget = new ConsentiSetup({
  core: { regulation: 'gdpr', locale: 'en' },
})

// Open preference modal from a footer link
document.querySelector('#cookie-settings')?.addEventListener('click', () => {
  widget.showModal()
})