lukaskupczyk/react-hook-consent

React consent management solution for cookies and (external) scripts.

react-hook-consent

React consent management solution and banner for cookies, local storage, session storage and (external) scripts.

Demo

Check out the CodeSandbox for a working example.

Documentation

• Documentation

Features

• Provides the consent context to components
• Loads (external) scripts based on consent state
• Deletes cookies, local storage and session storage when consent declined
• Hook to retrieve and change the current consent
• Optional Banner with detailed settings to approve / decline consent
• Persists the selection to local storage
• Ready for Next.js
• Dark and light mode
• Styling via css

Installation

yarn add react-hook-consent

# or

npm install react-hook-consent

Basic usage

Wrap the application in the ConsentProvider. Provide settings via the options prop. Optionally use the ConsentBanner component to display a consent banner to the user.

/*
 * index.tsx
 */

import { ConsentBanner, ConsentProvider } from 'react-hook-consent';

// styling
import 'react-hook-consent/dist/styles/style.css';

// ...
<ConsentProvider
    options={{
        services: [
            {
                id: 'myid',
                name: 'MyName',
                scripts: [
                    { id: 'external-script', src: 'https://myscript.com/script.js' },
                    { id: 'inline-code', code: `alert("I am a JavaScript code");` },
                ],
                cookies: [{ pattern: 'cookie-name' }, { pattern: /regex/ }],
                localStorage: ['local-storage-key'],
                sessionStorage: ['session-storage-key'],
                mandatory: true,
            },
        ],
        // customHash: 'my-custom-hash', // optional, e.g. when changing the options based on language
        theme: 'light',
    }}
>
    <App />
    <ConsentBanner
        settings={{ hidden: false, label: 'More', modal: { title: 'Modal title' } }}
        decline={{ hidden: false, label: 'No' }}
        approve={{ label: 'Yes' }}
    >
        <>
            Can we use cookies and external services according to our <a href="test">privacy policy</a> to improve the
            browsing experience?
        </>
    </ConsentBanner>
</ConsentProvider>;
// ...

react-hook-consent's Issues

[BUG] Cookie deletion does not work

Hey, somehow I cannot get the cookies to be deleted if I revoke the consent later.

import type { ConsentOptions } from 'react-hook-consent';

const scriptMatomo = `
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo.domaincom/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
`;

export const consentProviderOptions: ConsentOptions = {
  services: [
    {
      id: 'matomo',
      name: 'Matomo Analytics',
      description:
        'Analytics hosted on our own server. A privacy respecting alternative to Google Analytics.',
      scripts: [{ id: 'inline-code', code: scriptMatomo }],
      cookies: [
        { pattern: '_pk_ref.*' },
        { pattern: '_pk_cvar.*' },
        { pattern: '_pk_id.*' },
        { pattern: '_pk_ses.*' },
        { pattern: 'mtm_consent.*' },
        { pattern: 'mtm_consent_removed.*' },
        { pattern: 'mtm_cookie_consent.*' },
        { pattern: 'matomo_ignore.*' },
        { pattern: 'matomo_sessid.*' },
        { pattern: '_pk_hsr.*' },
      ],
      // localStorage: ['local-storage-key'],
      // sessionStorage: ['session-storage-key'],
      mandatory: false,
    },
  ],
  theme: 'dark',
};

The cookies

_pk_id.1.1fff:"69bbccaf910e190e.1703006272."
_pk_ses.1.1fff:"1"

still exist.

I test by accepting the cookies, deleting the react-hook-consent from local storage, refreshing and this time declining the cookies. The consent array in local storage is empty, so I'm guessing my test setup works (I'm using the demo example).

I tried to use the regex constructor too, to make sure the pattern is interpreted as a regular expression:

      cookies: [
        { pattern: new RegExp('_pk_ref.*') },
        { pattern: new RegExp('_pk_cvar.*') },
        { pattern: new RegExp('_pk_id.*') },
        { pattern: new RegExp('_pk_ses.*') },
        { pattern: new RegExp('mtm_consent.*') },
        { pattern: new RegExp('mtm_consent_removed.*') },
        { pattern: new RegExp('mtm_cookie_consent.*') },
        { pattern: new RegExp('matomo_ignore.*') },
        { pattern: new RegExp('matomo_sessid.*') },
        { pattern: new RegExp('_pk_hsr.*') },
      ],

same result.

[Question] Shouldn't the mandtory cookies be accepted, even if the user declines?

Question in title. I think that's the point, facebook for instance calls it decline optional cookies for this reason.

Pop up cookie consent as optional style

Can this also be shown as a pop up instead of a banner at the bottom of the page? It would be really nice to add this alternative design.

Possibility to hide "decline" button

Would it be possible to add option of "hidden" to decline button?

Possibility to change label of "accept selection" button

Possibility to change label of "accept selection" button in settings section

Have "mandatory" option of service item

It would be nice to have "mandatory" option on services. Item with this option set to true cannot be switched off - it will always be on.

[BUG] Has consent not working

Has consent returns true, when the consent array is empty.

  const { hasConsent, consent } = useConsent();

  useEffect(() => {
    console.log(consent);
    console.log(hasConsent('user-preferences'));
}, []);

Array [] UserPreferencesProvider.tsx:15:12](webpack://_N_E/src/utils/providers/UserPreferencesProvider.tsx?a62e)
true [UserPreferencesProvider.tsx:16:12](webpack://_N_E/src/utils/providers/UserPreferencesProvider.tsx?a62e)

Local storage was cleared right before thi.

Consent Options Hash Issue

Our consent options depend on the language of the site and whenever a user switches to another language the cookie banner appears again.

Therefore the hash calculation should not relay on any user texts. Using the cookie names should be sufficient.

How to use i118-next translation in cookieOption?

Based on your demo on sandbox, the consent provider should be in index.js file. How to use translations in consentOption then?

feature request: consent for local storage

You need consent for local storage, just like you do for cookies. In the readme I couldn't find that you could ask for permission for local storage.

I guess I could just add a cookie for each local storage key, but I think this would be a need feature.

What do you think?