@blateral/cookie-consent-options v0.2.2

b.lateral Cookie Consent Banner

This repository consist of a generic implementation of a cookie consent banner for use in various website projects. The project is split into two versions:

• Implementation as React component
• Native Javascript implementation

Install

npm install --save cookie-consent-options

Commands

In root directory:

In example directory:

Usage

Use as React Component

To provide a better workflow with React projects you can import the cookie-consent as a React Component.

import React, { Component } from "react";

import MyComponent from "cookie-consent";
import "cookie-consent/dist/index.css";

class Example extends Component {
    render() {
        <Cookie.View>
            {({
                handleAccept,
                handleDecline,
                additionalDeclineProps,
                additionalAcceptProps
            }) => (
                <>
                    <Cookie.Icon src="..." />
                    <Cookie.Title>
                        Verwendung von Cookies für Analyse- und Marketingzwecke
                    </Cookie.Title>
                    <Cookie.Text>
                        Wir verwenden Cookies, ...
                        <a href="datenschutz">Datenschutz</a>.
                    </Cookie.Text>
                    <Cookie.ActionContainer>
                        <Cookie.Action
                            onClick={handleDecline}
                            {...additionalDeclineProps}
                        >
                            Cookies ablehnen
                        </Cookie.Action>
                        <Cookie.Action
                            onClick={handleAccept}
                            {...additionalAcceptProps}
                            type="accept"
                        >
                            Cookies akzeptieren
                        </Cookie.Action>
                    </Cookie.ActionContainer>
                </>
            )}
        </Cookie.View>;
    }
}

The Cookie.View element holds the entire cookie consent banner. It provides multiple additional properties to customnize the banner behaviour. e.g. <Cookie.View name="cookie-consent">

Inside the Cookie.View element it is necessary to define a function with the following props (called RenderProps):

Subcomponents like <Cookie.Icon src="..." /> or <Cookie.Title> can be used to build a basic cookie consent banner. For better fine tuning they can be modified or replaced by own components.

Use as static native JavaScript library

For non-react projects it is possible to import the cookie consent banner as a single JavaScript file called cookie-consent.min.js. It can be found inside the repository folder example-static. To render the banner into the DOM you must provide a mount point element with the id cookie-consent. Additional properties can be defined as a JSON-Object inside a script tag.

<div id="cookie-consent">
    <script type="text/json">
        {
            "zIndex": 1,
            "icon": "...",
            "title": "Verwendung von Cookies für Analyse- und Marketingzwecke"
        }
    </script>
</div>

In addition to the already in the React section mentioned properties the static version takes parameters to define content values:

Date and Time formats

To show the date and time of the last cookie consent interaction inside the status message you can pass specific placeholders to the string. They are replaced with the values on runtime.

The parameters dateFormat and timeFormat controlling the output of date and time:

Output Status message

To output the consent status message add the attribute data-consent-status to one or multiple DOM Elements. If you use the static banner version you must define the status element before the cookie-consent.min.js import.

<div data-consent-status></div>

Implement consent button

To reopen the cookie consent banner you can add the attribute data-consent-button to one or multiple DOM Elements. If you use the static banner version you must define this element before the cookie-consent.min.js import.

<button data-consent-button>Open consent banner</button>

Trigger cookie scripts

If the cookie consent has been accepted all script tags with the type text/consent-banner-script are loaded and afterwards attached to the end of the body. While the content inside the script tags due to the type was ignored the new attached scripts now changes to the correct javascript type text/javascript. The old placeholder script tags are removed afterwards from the DOM. If you use the static banner version you must define the script element before the cookie-consent.min.js import.

<script type="text/consent-banner-script">
    console.log('b.ig brother is watching you! 👀');
</script>

Styling

Both the react component and the static version use predefined style classes. They are defined in the styles.css file.

• Styles for the react component are placed in dist/index.css
• Styles for the static version are placed in example-static/styles.css

License

MIT © ic3m3n