@huler/cookie-acceptance v1.2.0
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 linkGo 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"