simple-cookie-consent
v0.1.4Simple 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