Simple Cookie Consent

A basic cookie consent bar to help comply with the EU GDPR regulation. Compatible with all modern browsers and IE10+. It works by storing whether the user has consented in localStorage.

By default, it displays a simple message and an 'Accept' button but an additional button (e.g. 'Find out more' with a custom link) can be added (see Parameters). For example:

Installation

Yarn

yarn add simple-cookie-consent --dev

NPM

npm install simple-cookie-consent --save --dev

Usage

The library relies on Javascript to build the DOM/functionality and SCSS for basic styling.

1. Javascript

import SimpleCookieConsent from 'simple-cookie-consent';
 
new SimpleCookieConsent();

2. SCSS

@import '../../node_modules/simple-cookie-consent/dist/simple-cookie-consent.min.css';

Custom styling

All changes to styling should be made in CSS by overriding the base styles imported from the library. The markup is written using the BEM methodology and changes can be structrued like so (SCSS):

.c-simple-cookie-consent {
    // Bar styles here (e.g. background-color, position, z-index) 
    &__policy {
        // Message styling here (e.g. font) 
    }
 
    &__button {
    	// Styles that apply to both the 'accept' and 'additonal button'. (e.g. background-color) 
    	&--additional {
    		// Styles specifically for the 'additonal' button which override the base button styling 
    	}
    }
}

For additional elements, such as placement of buttons, inspect the bar in dev tools and override as demonstrated above.

Parameters

(policyText, barClassName, additionalLink, additionalLinkText)

parameter	description
policyText	Type: string Default: 'We use cookies to create your experience of our website better. To comply with the E-Privacy Regulations, we need to ask for your consent to set these cookies.' The message to explain what the website cookie policy is.
barClassName	Type: string Default: 'c-simple-cookie-consent' The class name of the component. Note, the CSS references the default parameter. If altering, you'll need to write your CSS from scratch.
additionalLink	Type: string Default: '' If you require an additional button, e.g. 'Find out more', include the link to the webpage here. Note, it relies on additionalLinkText also being set.
additionalLinkText	Type: string Default: '' As above, include the name of the button here. Note, it relies on additionalLink also being set.

MIT © Chris Boakes