@cuisine/cookie-banner

Customizable React cookie banner component.

Install

npm install --save @cuisine/cookie-banner

Usage

import React from 'react';

import CookieBanner from '@cuisine/cookie-banner';
import '@cuisine/cookie-banner/dist/index.css';

const App = () => {
  return <CookieBanner primaryColor="#FF0000" />;
};

Props

| Prop | Type | Description | | :------------------------ | :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | primaryColor | String | Optional. Color that will be used for Accept all button, links & toggle buttons. Default value is #109dc1. | | SelectionButton | React.JSX.Element | Optional. React component instance that will be used to render the Accept selected cookies button. | | AllButton | React.JSX.Element | Optional. React component instance that will be used to render the Accept all cookies button. | | selectionButtonText | String | Optional. If no SelectionButton is provided, or it doesn't have a text prop, this will be used as the button's text. Default value is Accept selected cookies. | | allButtonText | String | Optional. If no AllButton is provided, or it doesn't have a text prop, this will be used as the button's text. Default value is Accept all cookies. | | headlineText | String | Optional. Text that will be shown at the top of the banner. Default value is Cookies and the protection of your data. | | bodyInnerHTML | String | Optional. HTML that will be shown as body of the banner. Default value is This website uses cookies to improve the functionality of the website, to offer you a better website experience, and to provide social media features. By using this website, you consent to the use of cookies.Please find detailed information on the use of cookies on this website in our <a href="/data-privacy">Data Privacy Statement</a>. You can adjust your cookie settings below.. | | typeOfCookies | Array | Optional. Array of objects {name: String, text: String, defaultValue: Boolean} that will be used as reference to know what toggle buttons should render and their respective cookie names. Default value is [{ name: 'functionalCookies',text: 'Functional cookies',defaultValue: true,},{name: 'statisticalCookies',text: 'Statistical cookies',defaultValue: false,},{name: 'marketingCookies',text: 'Marketing cookies',defaultValue: false,},] |