useCookieConsent hook for React.js

Headless state management for GDPR cookie consent

• Headless - bring your own styles, we will provide the logic.
• Hook-based - extremely intuitive for React developers.
• React Context support - wrap your app in a provider and synchronse UI updates across the app.
• Tiny - less than 2kB gzipped.

Description

This package provides a wrapper around @use-cookie-consent/core package to provide best experience for React applications. Namely, it provides a React context, which provides all the functionality of core package but with reactive updates.

Installation

1npm install @use-cookie-consent/react

or

1yarn add @use-cookie-consent/react

Usage

Basic usage

The first step to this setup is to wrap your app in the CookieConsentProvider:

1import { CookieConsentProvider } from '@use-cookie-consent/react'
2
3export default function App() {
4  return {
5    <CookieConsentProvider>
6      ...
7    </CookieConsentProvider>
8  }
9}

Then you can read and update the cookie consent data from any component which is inside of the <CookieConsentProvider>. Both components you see below are not connected to each other in any way except the useCookieConsentContext function. You would put both of them separately somewhere in your app WITHOUT connecting them by any callbacks or passing state through props.

1// This component is an example of a component that you use to
2// accept/decline cookie consent, without reading any data.
3const CookieBanner = () => {
4  const { acceptAllCookies, declineAllCookies, acceptCookies } =
5    useCookieConsentContext();
6
7  return (
8    <div>
9      <button onClick={acceptAllCookies}>Accept all</button>
10      <button onClick={() => acceptCookies({ thirdParty: true })}>
11        Accept third-party
12      </button>
13      <button onClick={() => acceptCookies({ firstParty: true })}>
14        Accept first-party
15      </button>
16      <button onClick={declineAllCookies}>Reject all</button>
17    </div>
18  );
19};

1// This component is an example of a component which would show
2// the state of the cookie consent, without updating anything.
3const CookiesPreview = () => {
4  const { consent } = useCookieConsentContext();
5
6  return (
7    <div>
8      <div>
9        {`Third-party cookies ${consent.thirdParty ? 'approved' : 'rejected'}`}
10      </div>
11      <div>
12        {`First-party cookies ${consent.firstParty ? 'approved' : 'rejected'}`}
13      </div>
14    </div>
15  );
16};

Thanks to @pixelass for prividing the examples you see above.

Contributors

• Antoni Silvestrovic
• Gregor Adams

Discussions and Questions

For non-issues please consider joining our Discord here!

License

MIT