npm package: @huler/cookie-acceptance
Description: Show a cookie accept bar, and provide user's with control over which cookies you store.
Author: Huler
Latest version: 1.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
```jsx
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"
```