@deviktta/react-consent-manager
v1.0.4
Published
A lightweight cookie consent manager for React apps.
Downloads
32
Readme
React Consent Manager by deviktta
A lightweight cookie consent manager for React apps.
Requirements
- React >= 18
Installation
Add it to your app:
npm add @deviktta/react-consent-manager && \
npm installUsage
Banner component
Render <CookieConsent> once in your root layout. It shows a fixed bottom-right banner until the user accepts or declines.
import { CookieConsent } from "@deviktta/react-consent-manager";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<CookieConsent cookiePolicyUrl="/cookie-policy" />
</body>
</html>
);
}Props
| Prop | Type | Required | Description |
|-------------------|----------|----------|------------------------------------------------------------------------------------------------------------|
| cookiePolicyUrl | string | Yes | Path to your cookie policy page. The banner is always shown on this page so users can change their choice. |
| texts | object | No | Override any of the default English labels (see below). |
texts object
All fields are optional. Unset fields fall back to the English defaults.
<CookieConsent
cookiePolicyUrl="/politica-de-cookies"
texts={{
message: "Este sitio utiliza cookies...",
policyLinkLabel: "Política de cookies",
acceptLabel: "Aceptar",
declineLabel: "Rechazar",
}}
/>| Field | Default |
|-------------------|----------------------------------------------------------|
| message | "This site uses cookies to improve your experience..." |
| policyLinkLabel | "Cookie policy" |
| acceptLabel | "Accept" |
| declineLabel | "Decline" |
Reading consent in your own components
Use the useConsent hook to conditionally load scripts or render content:
"use client";
import { useConsent } from "@deviktta/react-consent-manager";
export default function AnalyticsScripts() {
const hasConsent = useConsent();
if (!hasConsent) return null;
return <YourAnalyticsComponent />;
}useConsent returns false on first render (before hydration) and updates reactively when the user accepts or declines via the banner.