7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
130 lines
3.5 KiB
Plaintext
130 lines
3.5 KiB
Plaintext
---
|
|
status: "published"
|
|
label: "Cookie Banner"
|
|
title: "Cookie Banner Component in the Next.js Supabase SaaS kit"
|
|
description: "Learn how to use the Cookie Banner component in the Next.js Supabase SaaS kit"
|
|
order: 7
|
|
---
|
|
|
|
This module provides a `CookieBanner` component and a `useCookieConsent` hook for managing cookie consent in React applications.
|
|
|
|
{% component path="cookie-banner" /%}
|
|
|
|
## CookieBanner Component
|
|
|
|
The CookieBanner component displays a consent banner for cookies and tracking technologies.
|
|
|
|
### Usage
|
|
|
|
```jsx
|
|
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
|
|
|
|
```jsx
|
|
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
|
|
|
|
```typescript
|
|
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 Base UI's Dialog primitive for improved accessibility
|
|
- Autofocus 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
|
|
|
|
```jsx
|
|
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. |