Component

Cookie Consent

A GDPR-style cookie-consent banner with per-category opt-in (accept all / reject all / save preferences), versioned persistence, and a swappable storage adapter (localStorage by default). Built on the headless @refraction-ui/cookie-consent core.

Example

The consent banner renders fixed to the bottom of the viewport. Accept all / Reject all / Manage preferences dismiss it and persist the choice to localStorage.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { useCookieConsent, CookieConsent } from '@refraction-ui/react-cookie-consent'

export function App() {
  const consent = useCookieConsent({
    version: '2024-01',          // bump to re-prompt after a policy change
    onChange: (prefs) => {
      if (prefs.analytics) loadAnalytics()
    },
  })
  return (
    <>
      {/* your app */}
      <CookieConsent consent={consent} policyUrl="/cookies" />
    </>
  )
}

Props

Prop	Type	Default	Description
`consent`	`UseCookieConsentResult`	--	The store + actions from useCookieConsent().
`position`	`'bottom' \| 'top'`	--	Banner position. Default bottom.
`title`	`string`	--	Banner heading.
`description`	`ReactNode`	--	Banner body text.
`policyUrl`	`string`	--	Link to the full cookie/privacy policy.
`className`	`string`	--	Additional CSS classes.