### Example React Component with CookieScript Integration

Source: https://help.cookie-script.com/en/articles/33028-cookiescript-integration-for-react

A complete example of a React component demonstrating the integration of the CookieScript banner. It shows how to import the hook, call it with a placeholder URL and specific options, and includes a basic JSX structure.

```javascript
import useCookieScript from "use-cookiescript-hook";

const App = () => {
  useCookieScript("{your installation banner URL from the account}", {
    position: "head-top"
  });

  return (
    // Your React component JSX code here
  );
}

```

--------------------------------

### Install CookieScript Hook for React (yarn)

Source: https://help.cookie-script.com/en/articles/33028-cookiescript-integration-for-react

Installs the 'use-cookiescript-hook' package using yarn, an alternative package manager for Node.js. This command achieves the same outcome as the npm installation.

```bash
yarn add use-cookiescript-hook
```

--------------------------------

### Install CookieScript Hook for React (npm)

Source: https://help.cookie-script.com/en/articles/33028-cookiescript-integration-for-react

Installs the 'use-cookiescript-hook' package using npm, a package manager for Node.js. This is a prerequisite for integrating CookieScript into a React application.

```bash
npm install use-cookiescript-hook
```

--------------------------------

### URL Structure for Language Detection

Source: https://help.cookie-script.com/en/articles/30066-cookie-consent-on-multi-language-website

Illustrates how CookieScript can detect the website's language by analyzing the URL for language codes. For example, '/it/' in the URL triggers Italian translation.

```plaintext
https://example.com/it/somepage.html

```

--------------------------------

### Listen to CookieScriptAccept Event with Categories in JavaScript

Source: https://help.cookie-script.com/en/articles/30242-custom-events

This example illustrates how to listen for the 'CookieScriptAccept' event, which is triggered when a user accepts specific cookie categories. The event object 'e' contains 'e.detail.categories' with an array of accepted categories. It also shows an alternative using CookieScript.instance.

```javascript
window.addEventListener('CookieScriptAccept', function(e) {
    // e.detail will include this data:
    // { categories: ['strict', 'functionality'] }
    
    // some code
});
```

```javascript
window.addEventListener('DOMContentLoaded', function(event) {
    CookieScript.instance.onAcceptAll = function(data) {
        // data will include this object:
        // { categories: ['strict', 'functionality'] }
        
        // some code
    }
});
```

--------------------------------

### Setting SameSite=None Cookie Attribute

Source: https://help.cookie-script.com/en/articles/35024-same-site-cookie-attribute

When setting the SameSite attribute to 'None', the 'Secure' attribute must also be set. This ensures the cookie is only sent over HTTPS. Insecure sites (HTTP) cannot use the 'None' attribute.

```text
SameSite=None; Secure.
```

--------------------------------

### Listen to CookieScriptAcceptAll Event in JavaScript

Source: https://help.cookie-script.com/en/articles/30242-custom-events

This code shows how to capture the 'CookieScriptAcceptAll' event, which fires when a user accepts all cookies. It includes examples for listening globally on the window and via CookieScript.instance. The global listener executes custom code directly, while the instance listener assigns a callback function.

```javascript
window.addEventListener('CookieScriptAcceptAll', function() {
    // your code here
});
```

```javascript
window.addEventListener('DOMContentLoaded', function(event) {
    CookieScript.instance.onAcceptAll = function() {
        // some code
    }
});
```

--------------------------------

### Ensure Consent Commands Fire Before Config Commands (gtag.js)

Source: https://help.cookie-script.com/en/google-tag-manager/google-ads-troubleshooting

For gtag.js implementations, this snippet explains how to resolve Consent Mode detection issues. It advises ensuring that `gtag('consent', 'default')` or `gtag('consent', 'update')` commands are executed before any `gtag('config', 'AW-xxxx')` commands.

```javascript
gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied'
});

// ... other code ...

gtag('config', 'AW-xxxx');
```

```javascript
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted'
});

// ... other code ...

gtag('config', 'AW-xxxx');
```

--------------------------------

### Hide Element on Cookie Consent in JavaScript

Source: https://help.cookie-script.com/en/articles/30242-custom-events

This example shows how to hide a specific HTML element (identified by 'myElement') when the user accepts all cookies. It utilizes the 'CookieScriptAcceptAll' event to trigger the JavaScript code that modifies the element's display style.

```javascript
window.addEventListener('CookieScriptAcceptAll', function() {
    var element = document.getElementById("myElement");
    element.style.display = "none";
});
```

--------------------------------

### Listen to CookieScriptLoaded Event in JavaScript

Source: https://help.cookie-script.com/en/articles/30242-custom-events

This snippet demonstrates how to listen for the 'CookieScriptLoaded' event to ensure that the CookieScript.instance is available before attempting to use its functions. This is crucial for initializing or interacting with CookieScript functionalities.

```javascript
window.addEventListener('CookieScriptLoaded', function() {
    // CookieScript.instance is available here
});
```

--------------------------------

### Get Available Cookie Categories in JavaScript

Source: https://help.cookie-script.com/en/articles/30246-custom-functions

This JavaScript function returns an array of cookie categories that are currently available for the user to choose from on your website. This is useful if your website does not utilize all possible cookie categories, allowing you to dynamically display relevant options.

```javascript
let availableCategories = CookieScript.instance.categories();
// availableCategories might look like:
// ['performance', 'targeting', 'functionality']
```