@cookisent/core

🍪 Cookie Consent Core

 

This package and readme still under construction you can see what this can do in our d.ts file🚧

Installation

easiest way to install is use CDN

<script src="https://unpkg.com/@cookisent/core@0.0.2-alpha.1/dist/cookie-consent.umd.js"></script>

<script>
  const cookie = new CookieConsent()
</script>

// Or Async/Defer loading script
<script async defer src="https://unpkg.com/@cookisent/core@0.0.2-alpha.1/dist/cookie-consent.umd.js"></script>

NPM,Yarn,Pnpm

  npm install -S @cookiesent/core
  yarn add @cookisent/core
  pnpm install -S @cookisent/core

Usage

script tag

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cookie = new CookieConsent()
  })
</script>

Or Async/Defer
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cookie = new CookieConsent()
  })
</script>

Es module/Module Base

import { CookieConsent } from '@cookisent/core'
//or
const { CookieConsent } = require('@cookisent/core')

const cookie = new CookieConsent()

Options/Customize

You can customize popup style/message or anything you want to d

Available Options

const cookie = new CookieConsent({
  //avaliable position top, bottom, left, right, top-left, top-right, bottom-left, bottom-right
  position: 'bottom',
  //show close button
  closeButton: true,
  //cookies setting
  cookies: {
    sameSite: true,
    maxAge: 30 * 24 * 60 * 60 * 1000
  },
  //component settings
  components: {
    //all component options accept 3 types 1. string 2. HTMLElement, 3. custom(see below) 
    title: 'Please Allow us to collect your Cookies🍪',
    body: 'We use cookies to make a better experiance between your and our website'
    okButton: 'Take my Cookie NOW!',
    cancelButton: 'nah, I want to keep my cookies'
    //or custom styles
    title: {
      content: 'My Title Content',
      classes: ['title-class', 'another-class']
    },
    body: {
      content: 'Yes this can customize😊',
      classes: ['my-body', 'my-awesome-body-class']
    }
  },
  onOk: (e: MouseEvent) => console.log('ok button pressed🙋‍♂️'),
  onCancel: (e: MouseEvent) => console.log('cancel button pressed🚀')
})

Custom HTMLElement

//custom HTML Component
<div id="myCustomTitle">
  <h3 class="popup-title">We use Cookies</h3>  
</div>
<div id="myCustomBody">
  <p class="popup-body">
    Lorem ipsum dolor sit amet consectetur adipisicing
    <a href="/more">Read more..</a>
  </p>
</div>
<script>
  const cookie = new CookieConsent({
    //...another setting
    components: {
      //all component options accept 3 types 1. string 2. HTMLElement, 3. custom(see below) 
      title: document.getElementById('myCustomTitle'),
      body: document.getElementById('myCustomBody')
    }
  })
</script>

Functions

in CookieConsent class some helper method

const cookie = new CookieConsent()
//manual assign cookie to user
cookie.setCookie()
//clear previous cookies
cookie.resetCookie()

Examples

• simple
• customize-basic
• customize-full

Typescript

this package was write in Typescript so you can use typing to make your life easier😊

export declare type PopupPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
export declare type PopupElement = {
    content: string;
    classes: string[];
};
export interface CookieOptions {
    sameSite: boolean;
    maxAge: number;
}

export interface ComponentOptions {
    popup: PopupElement | string | HTMLElement;
    title: PopupElement | string | HTMLElement;
    body: PopupElement | string | HTMLElement;
    okButton: PopupElement | string | HTMLElement;
    cancelButton: PopupElement | string | HTMLElement;
}

export interface CookieConsentOptions {
    position: PopupPosition;
    closeButton: boolean;
    cookies: CookieOptions;
    components: ComponentOptions;
    onOk: ((e: MouseEvent) => void) | undefined;
    onCancel: ((e: MouseEvent) => void) | undefined;
}

Roadmap

• integrate to React,Vue,Svelte,Solid
• make cleaning code to reduce bundle size
• integrate standard community package development to this repo
• and much more..😂

Contribute

You can make this package better by contribute. main rules is "MUST" follow conventional-commit info (plan to implement linter on this package soon)

Tool used in this packages

• Lerna monorepo
• turbo monorepo
• vitejs