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 cookiesreject(): void
: Function to reject cookiesclear(): void
: Function to clear the current consent status
ConsentStatus Enum
enum ConsentStatus {
Accepted = 'accepted',
Rejected = 'rejected',
Unknown = 'unknown'
}
Key Features
- Persistent Storage: Consent status is stored in localStorage for persistence across sessions.
- Server-Side Rendering Compatible: Checks for browser environment before accessing localStorage.
- Customizable: The
COOKIE_CONSENT_STATUS
key can be configured as needed. - 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
- Place the
CookieBanner
component at the root of your application to ensure it's always visible when needed. - Use the
useCookieConsent
hook to conditionally render content or initialize tracking scripts based on the user's consent. - Provide clear and concise information about your cookie usage in the banner description.
- 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.