Add a cookie-consent-provider

Is your feature request related to a problem? Please describe.

Feature: Cookie Consent Provider

As a Developer, I want to use a context, so that my application has global access to the consent state

Describe the solution you’d like

Add a CookieConsentProvider (react-context).

Describe alternatives you’ve considered

I made my own Provider/Context.

Feel free to reuse my code as is. It nicely extends your existing API and adds a new hook useCookieConsentProvider.

I could open a PR for this, but probably not any time soon, since I am currently fully stuffed with work.

Example: https://codesandbox.io/s/eager-tree-by1dk Demo: https://by1dk.csb.app/

import React, { createContext, FC, useContext, useMemo } from "react";
import { CookieConsentHookState, useCookieConsent } from "use-cookie-consent";

export const CookieConsentContext = createContext<CookieConsentHookState>({
	consent: {},
	acceptCookies() {
		/**/
	},
	declineAllCookies() {
		/**/
	},
	acceptAllCookies() {
		/**/
	},
	didAcceptAll() {
		return false;
	},
	didDeclineAll() {
		return false;
	},
	cookies: {
		set() {
			return undefined;
		},
		get() {
			return "";
		},
		getAll() {
			return {};
		},
		getJSON() {
			/**/
		},
		getAllJSON() {
			return {};
		},
		remove() {
			/**/
		},
	},
});

export const CookieConsentProvider: FC = ({ children }) => {
	const {
		consent,
		acceptAllCookies,
		declineAllCookies,
		acceptCookies,
		didAcceptAll,
		didDeclineAll,
		cookies,
	} = useCookieConsent();

	const context = useMemo(
		() => ({
			consent,
			acceptAllCookies,
			declineAllCookies,
			acceptCookies,
			didAcceptAll,
			didDeclineAll,
			cookies,
		}),
		[
			consent,
			acceptAllCookies,
			declineAllCookies,
			acceptCookies,
			didAcceptAll,
			didDeclineAll,
			cookies,
		]
	);

	return (
		<CookieConsentContext.Provider value={context}>{children}</CookieConsentContext.Provider>
	);
};

export const useCookieConsentContext = () => useContext(CookieConsentContext);

Additional context I use the provider like this

import React from "react";
import {useCookieConsentContext, CookieConsentProvider} from "./CookieConsent";

export const CookieBanner = () => {
  const {acceptAllCookies, declineAllCookies, acceptCookies} = useCookieConsentContext();

  return (
    <div>
      <button onClick={acceptAllCookies}>Accept all</button>
      <button onClick={() => acceptCookies({thirdParty: true})}>
        Accept third-party
      </button>
      <button onClick={() => acceptCookies({firstParty: true})}>
        Accept first-party
      </button>
      <button onClick={declineAllCookies}>Reject all</button>
    </div>
  );
};

export const Cookies = () => {
  const {consent} = useCookieConsentContext();

  return (
    <div>
      <div>
        {`Third-party cookies ${consent.thirdParty ? 'approved' : 'rejected'}`}
      </div>
      <div>
        {`First-party cookies ${consent.firstParty ? 'approved' : 'rejected'}`}
      </div>

    </div>
  );
};

export default function App() {
  return (

      <CookieConsentProvider>
        <CookieBanner/>
        <Cookies/>
      </CookieConsentProvider>
  );
}

[pixelass]

@bring-shrubbery Thank you. Sadly I won’t have time to look into it anytime soon. Feel free to use my code without credit. If I have time I’ll be happy to contribute.

[bring-shrubbery]

@pixelass This actually might be something for a separate package. Maybe I should create a @use-cookie-consent organization and publish these as scoped packages. Since this package right now is not really using anything that is React related, it could be used as a core package for other packages that are library-specific (@use-cookie-consent/react, @use-cookie-consent/vue, etc)