React Cookie Notice

A lightweight and customizable React component for informing users about the use of cookies on your website. React Cookie Notice gives you full control over the cookies that will be set by the component.

Look

Demo

https://mirzalikic.github.io/react-cookie-notice/

Installation

npm install @mirzalikic/react-cookie-notice --save

Usage

Import:

import CookieNotice from '@mirzalikic/react-cookie-notice';

Usage:

<CookieNotice>
    <h3>This website uses cookies</h3>
    <p>We use cookies that help the website to function and also to track how you interact with it. We will only use the cookies if you consent to it by clicking on "Accept all cookies". You can also manage individual cookie preferences.</p>
</CookieNotice>

Optionally some props can be set. A full list of available props can be found below.

<CookieNotice
    onSave={(cookies) => {
        console.log(cookies);
    }}
    onInit={(cookies) => {
        console.log(cookies);
    }}
    acceptAllButtonText="Accept"
    cookiePrefix="my-cookie-"
    cookies={[
        { name: 'necessary', checked: true, editable: false, default: true, title: 'Essential', text: 'Essential cookies enable basic functions and are necessary for the proper function of the website. The website cannot function properly without these cookies.' },
        { name: 'marketing', checked: false, editable: true, title: 'Marketing', text: 'Marketing cookies are used to track visitors across websites. They are used by third-party advertisers or publishers to display personalized ads.' },
        { name: 'test', checked: false, editable: true, title: 'Title', text: 'Lorem ipsum dolor sit amet.' }
    ]}>
    <h3>This website uses cookies</h3>
    <p>We use cookies that help the website to function and also to track how you interact with it. We will only use the cookies if you consent to it by clicking on "Accept all cookies". You can also manage individual cookie preferences.</p>
</CookieNotice>

Props

| Name | Type | Default | Description | | --------------------------- | -------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | preferencesButtonText | string | Cookie preferences | Content of preferences button. | | savePreferencesButtonText | string | Save cookie preferences | Content of save preferences button. | | acceptAllButtonText | string | Accept all cookies | Content of accept button. | | cookies | array | Array of objects** | Array of available cookies (see Cookies Property). | | cookiePrefix | string | react_cookie_notice_ | Prefix of the cookie name. | | containerClass | string | react-cookie-notice-container | CSS classes of the container div. | | contentClass | string | react-cookie-notice-content | CSS classes of the content div. | | buttonsClass | string | react-cookie-notice-buttons | CSS classes of the button div. | | buttonPrimaryClass | string | react-cookie-notice-button-primary | CSS classes of the primary button. | | buttonSecondaryClass | string | react-cookie-notice-button-secondar | CSS classes of the secondary button. | | onSave | function | (cookies) => {} | Function to be called after any cookie is set. Receives an array of all cookies and their informations. | | onInit | function | (cookies) => {} | Function to be called after the component is initialized. Receives an array of all cookies and their informations. | | containerStyle | object | {} | Inline styling for the container div. | | contentStyle | object | {} | Inline styling for the content div. | | cookieStyle | object | {} | Inline styling for the cookie div. | | buttonsStyle | object | {} | Inline styling for the buttons div. | | buttonPrimaryStyle | object | {} | Inline styling for the primary button. | | buttonSecondaryStyle | object | {} | Inline styling for the secondary button. | | cookieOptions | object | { expires: 365 } | Defines additional cookie attributes. See: https://github.com/js-cookie/js-cookie#cookie-attributes | | toggleVisibility | boolean | true | Toggles the display of the cookie notice. Change value of toggleVisibility to hide or show. | | legacyCookie | boolean | false | Defines whether the legacy cookie is set. See: https://web.dev/samesite-cookie-recipes/ | | legacyCookieOptions | boolean | { expires: 365 } | Defines additional legacy cookie attributes. See: https://github.com/js-cookie/js-cookie#cookie-attributes | | showCookiePreferences | boolean | true | Defines whether the preferences button is displayed. |

** default value of cookies property

[
    { name: 'necessary', checked: true, editable: false, default: true, title: 'Essential', text: '...' },
    { name: 'marketing', checked: false, editable: true, title: 'Marketing', text: '...' }
];

Cookies Property

You can define as many cookies as you want. A default cookie is required, which is identified with the key default.

Example:

[
  { name: 'necessary', checked: true, editable: false, default: true, title: 'Essential', text: '...' },
  ...
];

A cookie object has the following properties:

name Name of the cookie. The cookie will be set with the name: prefix + name

checked Defines whether the cookie is preselected in the checkbox.

editable Defines whether the cookie checkbox can be edited. Required cookies should not be editable, like the necessary cookie.

default A cookie in the list must be default. Usually it is the necessary cookie.

title Text that is displayed next to the checkbox.

text Description of the cookie. Will be displayed below the title.

License

MIT