npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@beyonk/gdpr-cookie-consent-banner

v12.1.4

Published

GDPR Cookie Consent Banner for Svelte/Kit

Downloads

5,338

Readme

GDPR Cookie Consent banner

js-standard-style actions SvelteKit Svelte v3

What is it?

Svelte implementation of a compliant GDPR banner. It allows the user granular opt-in and out of four different cookie categories.

It now works with SvelteKit without any workarounds!

What are its features?

  • Small, discrete, and non-intrusive
  • GDPR Compliant
  • Responsive
  • Offers four categories
  • Runs any function on opting-in
  • Runs opted-in functions on each visit
  • Changing the choices requires the user to opt-in again.
  • Svelte Ready
  • No dependencies
  • Choices expire yearly
  • Optional CSS (with BEM) to bootstrap your cookie message right away
  • Modifiable labels and messages

How do I install it?

Via NPM

Simply install the node module into your codebase.

npm install --save-dev @beyonk/gdpr-cookie-consent-banner

Via CDN

Tap into either unpkg or jsdelivr:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>

Usage

Svelte

Just use it as a regular svelte component:

<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} />

<script>
  import '@beyonk/gdpr-cookie-consent-banner/banner.css' // optional, you can also define your own styles
  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  function initAnalytics () {
    // do something with segment.io or google analytics etc
  }
</script>

HTML / Web Component

Use the custom HTML element cookie-consent-banner:

<!-- optional, you can also define your own styles, or override the provided ones -->
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/src/lib/banner.css"
 />

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@beyonk/gdpr-cookie-consent-banner/dist/index.js"
></script>

<cookie-consent-banner cookie-name="foo" description="bar" />

Methods

You can re-call the cookie banner from an external link by binding the component instance and calling show() on it.

<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={initAnalytics} />

<script>
  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  let gdprBanner

  gdprBanner.show()
</script>

Props

The defaults are shown below.

When using as a Web Component, use the lower-dash-case version of the attribute name, pass booleans as strings, and object attributes as json strings

It is not possible to opt-out of 'necessary' cookies.

const props = {
  /**
   * You must set the cookie name.
   **/
  cookieName: 'beyonk_gdpr',

  /**
   * Whether to display the banner to the user or not. This can be because you're in an iframe
   * and there is no room to show it if they haven't already consented, but, if they have already
   * consented, you want to action the "enableAnalytics" and similar handlers if they *have*.
   *
   * Default is true
   * 
   * For Web Components, pass `visible="true"`
   **/
  visible: true,

  /**
   * The cookie configuration, such as domain and path.
   * 
   * For web components, pass a JSON string: `cookie-config='{ "domain": "example.com", "path": "/" }'`
   **/
  cookieConfig: {
    domain: 'example.com',
    path: '/'
  },

  /**
   * These are the top two lines of text on the banner
   * The 'description' field can include html such as links
   **/
  heading: 'GDPR Notice',
  description: 'We use cookies to offer a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Please review our <a href="/privacy-policy">privacy policy page</a>. By clicking accept, you consent to our privacy policy & use of cookies.',

  /**
   * All the button labels and aria-label content.
   **/
  acceptLabel: 'Confirm all',
  rejectLabel: 'Reject all',
  settingsLabel: 'Preferences',
  closeLabel: 'Close window',
  editLabel: 'Edit settings',

  /**
   * These are the default opt-ins and their descriptions.
   * When value is set to true, the option will automatically be checked on load.
   *
   * If you want to hide a category, simply set it to false, e.g. 'marketing: false'
   **/
  choices: {
      necessary: {
          label: "Necessary cookies",
          description: "Used for cookie control. Can't be turned off.",
          value: true
      },
      tracking: {
          label: "Tracking cookies",
          description: "Used for advertising purposes.",
          value: true
      },
      analytics: {
          label: "Analytics cookies",
          description: "Used to control Google Analytics, a 3rd party tool offered by Google to track user behavior.",
          value: true
      },
      marketing: {
          label: "Marketing cookies",
          description: "Used for marketing data.",
          value: true
      }
  },

  /**
   * Show an icon to edit cookies later, when banner is closed.
  **/
  showEditIcon: true
}

Events

Events are how you react to consent. Each type of consent emits an event when agreed to by the user.

For convenience when using Web Components - and to work around race conditions whereby events are emitted by the component prior to the handler being attached, we also emit the same events, with the prefix consent, on window.

Svelte

<GdprBanner bind:this={gdprBanner} cookieName="foo" description="bar" on:analytics={initAnalytics} />

<script>
  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  function initAnalytics () {
    // some fathom analytics tracking code or similar
  }
</script>

HTML / Web Components

<cookie-consent-banner cookie-name="foo" description="bar" />

<script>
  document.getElementsByTagName('cookie-consent-banner')[0].addEventListener('analytics', () => {
    // some fathom analytics tracking code or similar
  })

  // We also emit these events on `window`
  window.addEventListener('consent:analytics', () => {
    // some fathom analytics tracking code or similar
  })
</script>