Cookie Acceptance

Huler's Cookie Acceptance and preferences popup. Pass which cookies you store, and the package will request the user’s consent, returning which of the provided cookie types they agree to.

Installation

You can install the package via

yarn add @huler/cookie-acceptance

npm install @huler/cookie-acceptance

Get Started

import { CookieAcceptance } from "@huler/cookie-acceptance";

// This function can do whatever you want with the users consent
const injectScript = (cookie) => {
  switch (cookie) {
    case "performance":
      // Inject performance tracking script
      break;
    case "functional":
      // Inject functional tracking script
      break;
    default:
      break;
  }
};

<CookieAcceptance
  image="https://i.giphy.com/media/HGe4zsOVo7Jvy/giphy.webp"
  smallText="By clicking accept, you agree to cookies"
  largeText="Visiting websites may store or retrieve information on your browser."
  cookies={["performance", "functional"]}
  appName="Company"
  injectScript={(cookie) => injectScript(cookie)}
  privacyPolicyURL="https://company.io/privacy"
/>

Props

| Value | Type | Notes | | ---------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | | image | String | Optional. Adds an image to the top of the cookie popup | | smallText | String | Text that displays on the small cookie popup. | | largeText | String | Text that displays on the expanded cookie preferences. | | cookies | array of string | Required. Pass the types of cookies want to get the users consent for - choose from 'performance', 'functional', 'tracking' | | appName | String | Required. Gets prepended to you cookie types when stored in localStorage. | | injectScript | function | Required - Runs for each cookie type that is accepted by the user, passes through the cookie type as a parameter | | privacyPolicyURL | String | Required. Displays a link to your privacy policy | | settings | boolean | Show or hide the cookie preferences modal. Useful for allowing users to re-choose their preferences | | onConfirm | function | Pass an additional function that will run when the user confirms their choices | | onClose | function | Pass an additional function that will run when the user closes the modal without confirming their choices |

Accessing Cookies

Once the user has confirmed their choices, the package will execute injectScript for each cookie type the user has accepted, passing the type as a parameter. From there you can do whatevever you need to with the user's consent.

On acceptance, a futher local storage item will also be stored called:

appName_reactCookieAcceptance_hasSetCookies

This is so that we know if the user has already agreed or set their cookie preferences, therefore we won’t show them the popup again.

Showing the Popup again

To show the pop up again, pass true through to the settings props. This will trigger the modal to open again.

Dev Setup for editing package locally

Clone the repo

git clone https://github.com/huler/cookie-acceptance.git

Create yarn links in repo

cd cookie-acceptance
yarn
yarn link
cd node_modules/react
yarn link
cd ../react-dom
yarn link

Go to project I need to link to

cd my/testing/project
yarn add @huler/cookie-acceptance
yarn link "@huler/cookie-acceptance"
yarn link "react"
yarn link "react-dom"