lukaskupczyk/react-hook-consent

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

react-hook-consent's Issues

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?

[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.

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?

[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.

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.

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.

[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.

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

toggleBanner doesn't do anything and hasConsent() always returns true

Hello, thanks for the nice lib, I like the architecture and many options to configure.
But I'm having an issue. I wrapped by App component in my ConsentWrapper:

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

export const consentOptions: ConsentOptions = {
  services: [
    {
      id: 'analytics',
      name: 'Enregistrer des statistiques de navigation',
      description:
        'Ces cookies sont là pour nous aider à améliorer notre service grâce à des statistiques anonymes sur l’usage du pass Culture. Nous regardons par exemple les mots que tu tapes dans la barre de recherche pour définir des tendances et ainsi améliorer les résultats qui te sont proposés.',
      //   scripts: [
      //     { id: 'external-script', src: 'https://myscript.com/script.js' },
      //     { id: 'inline-code', code: `alert("I am a JavaScript code");` },
      //   ],
      cookies: [{ pattern: 'cookie-analytics' }],
      //   localStorage: ['local-storage-key'],
      //   sessionStorage: ['session-storage-key'],
      mandatory: false,
    },
  ],
  // customHash: 'my-custom-hash', // optional, e.g. when changing the options based on language
  theme: 'light',
}

export function ConsentWrapper({ children }: { children: React.ReactNode }) {
  return (
    <ConsentProvider options={consentOptions}>
      {children}
      <ConsentBanner settings={settings} decline={decline} approve={approve}>
        Respect de ta vie privée: Les cookies sont des petits fichiers stockés
        sur ton appareil lorsque tu navigues. Nous utilisons les données
        collectées par ces cookies et traceurs pour t’offrir la meilleure
        expérience possible.
      </ConsentBanner>
    </ConsentProvider>
  )
}

const settings = {
  hidden: false,
  label: 'Choisir',
  modal: {
    title: 'Réglages des cookies',
    description:
      'Les cookies sont des petits fichiers stockés sur ton appareil lorsque tu navigues. Tu peux choisir d’accepter ou non l’activation de leur suivi. Nous utilisons les données collectées par ces cookies et traceurs pour t’offrir la meilleure expérience possible.',
    approveAll: { label: 'Tout accepter' },
    approve: { label: 'Accepter mes choix' },
    decline: { hidden: true },
  },
}
const decline = { hidden: false, label: 'Refuser' }
const approve = { label: 'Accepter' }

The cookies modal shows correctly with all the options, but when I attempt to toggle it manually with this code:

<ConsentWrapper>
      <button
        onClick={() =>
          alert(
            `clicked it, and hasConsent('analytics') is: ${hasConsent('analytics')}`
           )
          toggleBanner()
        }>
        Toggle Consent Banner
      </button>

      <p>
        Has analytics consent:
        {hasConsent('analytics') ? 'Yes cookies is active' : 'No'}
      </p>
//...

I'm able to see the alert, but the cookies modal doesn't show up.
Also, even when I arrive on my app for the first time, hasConsent('analytics') is already true, and if I refuse all cookies, hasConsent('analytics') is still true.
Here are my main dependecies:

  "dependencies": {
    "@sentry/nextjs": "^7.105.0",
    "@strapi/blocks-react-renderer": "^1.0.1",
    "firebase": "^10.8.1",
    "next": "14.1.1",
    "next-qrcode": "^2.5.1",
    "pure-react-carousel": "^1.30.1",
    "qs": "^6.11.2",
    "rc-slider": "^10.5.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-consent": "^3.5.3",
    "react-player": "^2.15.1",
    "styled-components": "^6.1.0"
  },

Let me know what information I can supply to fix the issue 🙏