Add a cookie-consent-provider

pixelass commented 3 years ago

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>
  );
}