@freshheads/cookie-guard v4.0.1
FHCookieGuard
A set of hooks to use to save a user's cookie preferences in a cookie(🥲).
The cookie settings are stored as follows:
'["functional","analytics","marketing"]'
Setup with @freshheads/analytics-essentials
Usage
You can use the build in cookieguard to get up and running quickly or use the provided hooks to make your own.
The cookiebanner makes use of Context to share the cookie state throughout the app.
- Wrap your app with the Provider:
import { CookieGuardContextProvider } from '@freshheads/cookie-guard';
<CookieGuardContextProvider>
<App />
</CookieGuardContextProvider>;
The provider optionally accepts:
- onCookiesChange
- onCookiesSet
- onCookiesCleared
e.g. If you want to change the Google consent options based on the cookie settings
Add the premade Cookie Banner to your app
import {
CookieBanner,
CookieCategorySettings,
CookieGuardProvider
} from '@freshheads/cookie-guard';
import '@freshheads/cookie-guard/dist/style.css';
const CookieGuardProps = {
title: 'Onze site maakt gebruik van cookies.',
description:
'Wij gebruiken cookies voor de werking van de website, analyse en verbetering en marketingdoeleinden.',
acceptAllLabel: 'Alle cookies accepteren',
saveLabel: 'Opslaan',
requiredLabel: 'Noodzakelijke cookies'.
functionalLabel: 'Functionele cookies',
analyticsLabel: 'Analytische cookies',
marketingLabel: 'Marketing cookies',
}
return (
<CookieGuardProvider>
{/** your app components **/}
<CookieBanner {...CookieGuardProps} />
</CookieGuardProvider>
);
To style look at the source code
/src/popupstyles.css
and import your own css.You can also use the hooks to make your own custom cookiebanner
Examples
- Chakra-UI custom cookie banner
5 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago