@havlasme/react-cookie-consent

react-cookie-consent

React Cookie Consent.

• Demo
• Installation
• Usage
• Component
  • CookieConsent
  • CookieConsent.Category
  • CookieConsent.Cookie
  • CookieConsent.Portal
• Styling

Demo

a minimal demo is in the example directory:

npm run serve:example

Installation

npm install --save @havlasme/react-cookie-consent

or use yarn:

yarn add @havlasme/react-cookie-consent

Usage

import cookie consent component:

import { CookieConsent } from '@havlasme/react-cookie-consent'

optionally import cookie consent stylesheet:

import '@havlasme/react-cookie-consent/dist/react-cookie-consent.min.css'

sample:

<CookieConsent version={20220201} onSubmit={handleSubmit}>
    <h4 className="cc-title">
        Cookie Consent
    </h4>

    <div className="cc-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus, eros in rhoncus volutpat, metus diam malesuada velit, quis suscipit
        lacus ligula eget arcu. Duis tempor leo eget leo tristique hendrerit. Proin luctus lobortis libero, et lacinia libero suscipit et. Phasellus
        venenatis metus ut velit maximus, eget lacinia arcu ultrices.
    </div>

    <div className="cc-privacy-policy">
        Read more in
        <a href="#">privacy policy</a>
    </div>

    <CookieConsent.Category checked={true} disabled={true} name="technical" title="Technical">
        <div className="cc-category-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo purus, nec semper orci hendrerit eget. Nam in purus eget
            neque feugiat consequat id eget odio.
        </div>

        <CookieConsent.Cookie name="cc:consent" expiration="Persistent" type="HTML">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque placerat massa, eu molestie diam aliquam vitae.
        </CookieConsent.Cookie>
    </CookieConsent.Category>

    <CookieConsent.Category name="analytical" title="Analytical">
        <div className="cc-category-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis rutrum hendrerit. Quisque quis dui id lorem elementum consectetur
            a ut orci. Suspendisse aliquet sit amet justo nec viverra. Suspendisse potenti.
        </div>

        <CookieConsent.Cookie name="analytical1" expiration="1 year" type="HTTP">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nunc arcu, tincidunt ac ligula in, tempor consectetur arcu. Mauris nec
            magna finibus, efficitur nunc id, pretium nunc.
        </CookieConsent.Cookie>

        <CookieConsent.Cookie name="analytical2" expiration="1 minute" type="HTTP">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies luctus aliquet. Duis nec urna sit amet eros pharetra auctor
            et sit amet leo. Sed interdum blandit lorem. Maecenas facilisis ut ante et scelerisque.
        </CookieConsent.Cookie>
    </CookieConsent.Category>

    <CookieConsent.Category name="marketing" title="Marketing">
        <div className="cc-category-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia ultrices pellentesque. Proin sodales ac tellus in volutpat.
            Curabitur semper tempor dolor vitae posuere. Pellentesque ultrices orci vel scelerisque molestie. Curabitur eget arcu et dolor maximus
            lacinia. Aenean nec turpis ut lectus gravida semper at varius mauris. Sed eget eleifend purus.
        </div>

        <CookieConsent.Cookie name="marketing1" expiration="3 month" type="HTTP">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue neque, lobortis eu leo ac, mattis ullamcorper odio. Fusce elementum
            leo nibh, eu tristique augue vestibulum sed.
        </CookieConsent.Cookie>
    </CookieConsent.Category>
</CookieConsent>

Component

CookieConsent

The cookie consent main component, used to position cookie consent on the screen.

prop name	description	default value	example value
className	the class name	N/A	"class1 class2"
expiration	the cookie consent expiration (in seconds)	31536000 (1 year)	2592000
open	is the cookie consent expanded?	false	true
persist	the cookie consent persistence key	"cc:consent"	"cookie-consent"
version	the cookie consent version	N/A	20220201
onSubmit	the submit event callback	N/A	(value) => console.log(event)

CookieConsent.Category

The cookie consent category component, used to describe cookie category.

prop name	description	default value	example value
checked	is the cookie category control checked?	false	true
className	the class name	N/A	"class1 class2"
disabled	is the cookie category control disabled?	false	true
name	the cookie category name, used as identity in response	N/A	"analytical"
title	the cookie category title	N/A	"Analytical"
onChange	the change event callback	N/A	(event) => console.log(event)

CookieConsent.Cookie

The cookie consent cookie component, used to describe cookie inside category.

prop name	description	default value	example value
className	the class name	N/A	"class1 class2"
expiration	the cookie expiration	N/A	"1 month"
name	the cookie name	N/A	"cc:consent"
type	the cookie type	N/A	"HTTP"

CookieConsent.Portal

The cookie consent portal component, used to displace the cookie consent DOM node outside the parent component DOM hierarchy.

Styling

the cookie consent component can be styled using css:

variable	description	default value
--cc-theme-background	the cookie consent component background	#FFFFFF
--cc-theme-color	the cookie consent component text color	#000000
--cc-theme-portal-background	the portal component background	rgba(255, 255, 255, 0.25)
--cc-theme-checkbox-active-background	the checkbox background in active state	#0D6EFD
--cc-theme-checkbox-inactive-background	the checkbox background in inactive state	#DDDDDD
--cc-theme-checkbox-control	the checkbox control color	#FFFFFF
--cc-theme-partition	the category / cookie partition color	#DDDDDD