Cookie Banner Component in the Next.js Supabase SaaS kit

This module provides a CookieBanner component and a useCookieConsent hook for managing cookie consent in React applications.

CookieBanner Component

The CookieBanner component displays a consent banner for cookies and tracking technologies.

Usage

import dynamic from 'next/dynamic';
const CookieBanner = dynamic(() => import('@kit/ui/cookie-banner').then(m => m.CookieBanner), {
  ssr: false
});
function App() {
  return (
    <div>
      {/* Your app content */}
      <CookieBanner />
    </div>
  );
}

Features

• Displays only when consent status is unknown
• Automatically hides after user interaction
• Responsive design (different layouts for mobile and desktop)
• Internationalization support via the Trans component
• Animated entrance using Tailwind CSS

useCookieConsent Hook

This custom hook manages the cookie consent state and provides methods to update it.

Usage

import { useCookieConsent } from '@kit/ui/cookie-banner';
function MyComponent() {
  const { status, accept, reject, clear } = useCookieConsent();
  // Use these values and functions as needed
}

API

• status: ConsentStatus: Current consent status (Accepted, Rejected, or Unknown)
• accept(): void: Function to accept cookies
• reject(): void: Function to reject cookies
• clear(): void: Function to clear the current consent status

ConsentStatus Enum

enum ConsentStatus {
  Accepted = 'accepted',
  Rejected = 'rejected',
  Unknown = 'unknown'
}

Key Features

1. Persistent Storage: Consent status is stored in localStorage for persistence across sessions.
2. Server-Side Rendering Compatible: Checks for browser environment before accessing localStorage.
3. Customizable: The COOKIE_CONSENT_STATUS key can be configured as needed.
4. Reactive: The banner automatically updates based on the consent status.

Styling

The component uses Tailwind CSS for styling, with support for dark mode and responsive design.

Accessibility

• Uses Radix UI's Dialog primitive for improved accessibility
• Autofocu s on the "Accept" button for keyboard navigation

Internationalization

The component uses the Trans component for internationalization. Ensure you have the following keys in your i18n configuration:

• cookieBanner.title
• cookieBanner.description
• cookieBanner.reject
• cookieBanner.accept

Best Practices

1. Place the CookieBanner component at the root of your application to ensure it's always visible when needed.
2. Use the useCookieConsent hook to conditionally render content or initialize tracking scripts based on the user's consent.
3. Provide clear and concise information about your cookie usage in the banner description.
4. Ensure your privacy policy is up-to-date and accessible from the cookie banner or nearby.

Example: Conditional Script Loading

function App() {
  const { status } = useCookieConsent();
  useEffect(() => {
    if (status === ConsentStatus.Accepted) {
      // Initialize analytics or other cookie-dependent scripts
    }
  }, [status]);
  return (
    <div>
      {/* Your app content */}
      <CookieBanner />
    </div>
  );
}

This cookie consent management system provides a user-friendly way to comply with cookie laws and regulations while maintaining a good user experience.