Gatsby Cookie Notice

A customizable React component that display a cookie banner on your website, Gatsby Cookie Notice can be customized very easily.

Screenshots

Installation

1npm i gatsby-cookie-notice

Usage

First, you have to import the component to your file.

1import {CookieNotice} from "gatsby-cookie-notice";

Then, you call the component in your view, passing your text :

1<CookieNotice>
2    <h4>This websites uses cookies.</h4>
3    <p>We use cookies to make the site work better, but also to see how you interact with it. how you interact with it. We will only use cookies if you allow us to do so by clicking by clicking on "Accept Cookies". You can also choose which cookie you want to allow.</p>
4</CookieNotice>

You can also pass somes props (list below)

1<CookieNotice
2  personalizeButtonClasses={"my-btn-classes"}
3  personalizeButtonText={"I want to choose my cookies !"}
4  cookies={[
5          {name: 'necessary', editable: false, default: true, title: 'Essentiel', text: 'Essential cookies are necessary for the proper functioning of the site. The site cannot function properly without them.' },
6          {name: 'gatsby-gdpr-google-analytics', editable: true, default: true, title: 'Google Analytics', text: 'Google Analytics is a statistical tool of Google allowing to measure the audience of the website.' }
7    ]}>
8    <h4>This websites uses cookies.</h4>
9    <p>We use cookies to make the site work better, but also to see how you interact with it. how you interact with it. We will only use cookies if you allow us to do so by clicking by clicking on "Accept Cookies". You can also choose which cookie you want to allow.</p>
10</CookieNotice>

By default gatsby-cookie-notice work with Bootstrap 5, but you can change classes by passing props.

Props

Name	Default	Description
backgroundClasses	"container"	Div inside the BackgroundWrapper, create to make the backgronud color by default.
backgroundWrapperClasses	"bg-cookie fixed-bottom py-5"	Div that wrap all the others.
acceptButtonText	"Accept"	Accept button text
acceptButtonClasses	"float-end"	Accept button classes
buttonWrapperClasses	"btn btn-primary btn-lg mx-2"	Accept and decline button are wrapped inside the same div, here you can change the class of this div.
declineButton	true	Do you want a decline button ? True or false.
declineButtonText	"Decline"	Decline button classes
declineButtonClasses	"btn btn-secondary btn-lg mx-2"	Decline button text
wrapperClasses	"d-flex justify-content-between cookie-notice"	Classes of the div that wrap accept/decline button (which are in the same div), and also the personalize button.
personalizeButtonClasses	"btn btn-secondary"	Personalize button classes
personalizeButtonText	"Personalize"	Personalize button text
cookies	[{name: 'necessary', editable: false,default: true,title: 'Essentiel',text: 'Essential cookie are necessary for the proper function of the website'}]	Cookie that you want to implement.
cookieDays	365	How much times do you want to keep the cookies ?
personalizeButtonEnable	true	Activate / Desactivate the personalize button
cookieListClasses	"row cookie-list"	Styles of a div that wrap every every cookie on the customize section.
cookieMapClasses	"col-12 col-md-6"	Styles of a Class that wrap checkbox + label (cookie title) + p(description of the cookie)
cookieTitleClasses	""	Styles of the label of the cookie (personalize cookies)
personalizeValidationClasses	"btn btn-primary btn-lg float-end"	Classes for the button that save the preferences (personalize cookies)
personalizeValidationWrapperClasses	"col-12"	Classes for the button wrapper that save the preferences (personalize cookies)
personalizeValidationText	"Save"	Validation button text

Cookies property

name Name of the cookie, should be the same as gatsby-plugin-gdpr-cookies cookie name. editable If the cookie isn't editable, the checkbox cannot be checked / unchecked, used for necessary cookies. default Cookie default value, if the cookie isn't editable, the default value is stored while decline the cookie. title Title of the cookie, displayed on the customize section. text Description of the cookie, displayed with the title on the customize section.

License

MIT

Acknowledgement

Thank's to mirzalikic. He have a repository called "react-cookie-notice" that inspired me to create this repository for gatsby. The design and a bit of code are inspired by him. Also, thank's to all the peoples that will help the repository (add features, fix bugs, ..)