Normal Programming Mistake

    simple-cookie-consent

    0.1.8 • Public • Published

    Simple Cookie Consent

    npm version StyleCI

    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:

    Cookie Bar 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

    Keywords

    none

    Install

    npm i simple-cookie-consent

    DownloadsWeekly Downloads

    4

    Version

    0.1.8

    License

    MIT

    Unpacked Size

    37.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • chrisboakes