CookieConsent

Code

Code examples

Modal

import { CookieModal } from 'hds-react';

export const SimpleModalVersion = () => {
  const [language, setLanguage] = React.useState('en');
  const onLanguageChange = (newLang) => setLanguage(newLang);
  const contentSource = {
    siteName: 'Test site',
    currentLanguage: language,
    optionalCookies: {
      cookies: [
        {
          commonGroup: 'statistics',
          commonCookie: 'matomo',
        },
      ],
    },
    language: {
      onLanguageChange,
    },
    focusTargetSelector: '#focused-element-after-cookie-consent-closed',
    onAllConsentsGiven: (consents) => {
      // called when consents are saved
      // handle changes like:
      if (!consents.matomo) {
        // stop matomo tracking
      }
    },
  };

  const Application = () => {
    return (
      <div>
        <h1 id="focused-element-after-cookie-consent-closed" tabIndex={0}>
          Simple cookie consent example
        </h1>
      </div>
    );
  };

  return (
    <>
      <CookieModal contentSource={contentSource} />
      <Application />
    </>
  );
};

View working modal demo in Storybook

Rendered on a page

import { CookiePage } from 'hds-react';

export const PageVersion = () => {
  const contentSource = {
    siteName: 'Test site',
    currentLanguage: 'en',
    optionalCookies: {
      cookies: [
        {
          commonGroup: 'statistics',
          commonCookie: 'matomo',
        },
      ],
    },
    onAllConsentsGiven: (consents) => {
      // called when consents are saved
      // handle changes like:
      if (!consents.matomo) {
        // stop matomo tracking
      }
    },
  };

  return (
    <main>
      <CookiePage contentSource={contentSource} />
    </main>
  );
};

View working page example in Storybook

Packages

Properties

Note! You can find the full list of properties in the React Storybook. Also, you can find a detailed description of the contentSource property in the API tab.