# GDPR Cookie Setting

Inspired by [passatgt](https://github.com/passatgt/gdpr-cookie-notice)

This is a javascript solution to show a gdpr compliant cookie notice on your website.

![google-sheet-example](.github/images/FirstScreenShort.png)

![google-sheet-example](.github/images/SecondScreenShort.png)

## Demo

Check this site for a quick demo: [Link](https://cookie-handler-gdpr.netlify.com/)

## Installation

### cdn

```html
   <script src=https://cdn.jsdelivr.net/npm/cookie-handler-gdpr@latest></script>

   <script>
     const gdpr = gdprCookieNotice({
       essential: ['PHPSSID','LANG'] // name of essential cookie
       locale: 'en', // language ("en", "de")
       colorPrimary: '#ff0000', // change primary color (used in button and radio)
       colorSecondary: '#000000', // change secondary color (used in link)
       iconColor: '#ffffff', // change icon color
       policy: "https://www.20scoops.com", // cookie policy link
       performance: ["JSESSIONID"],
       marketing: ["SSID"],
       googleAnalytic: "UA-MOCK", // google analytics UID
     });
   </script>
```

**Note: coolie handler gdpr script should be placed before google analytic **

### esm module

```
  yarn add cookie-handler-gdpr
```

```js
import { gdprCookieNotice } from "cookie-handler-gdpr/dist/esm";

const gdpr = gdprCookieNotice({
  essential: ['PHPSSID','LANG'] // name of essential cookie
  locale: "en", // language ("en", "de")
  colorPrimary: "#ff0000", // change primary color (used in button and radio)
  colorSecondary: "#000000", // change secondary color (used in link)
  iconColor: "#ffffff", // change icon color
  policy: "https://www.20scoops.com", // cookie policy link
  performance: ["JSESSIONID"],
  marketing: ["SSID"],
  googleAnalytic: "UA-MOCK", // google analytics UID
  ga: ReactGa.ga(), // if you use ReactGa, provide ga instance via ReactGa.ga() to ga option
});
```

## Switch Language Dynamically

```js
gdpr.setLanguage('languageKey');
```

Language Key

```
 en = English
 de = Deutsch
```

## Custom position

You can use 'cookie-handler-gdpr' as id or class name to custom dialog position.

## Custom font-family

You can use prop 'fontFamily' to set font style

example

```
const gdpr = gdprCookieNotice({
  .....,
fontFamily: "Roboto, san serif"
})
```