🍪 react-cookie-consent 🍪

A small, simple and customizable cookie consent bar for use in React applications.

Default look

Installation

npm install react-cookie-consent

or use yarn:

yarn add react-cookie-consent

Using it

You can import the cookie bar like this:

import CookieConsent from "react-cookie-consent";

If you want to set/remove cookies yourself you can optionally import Cookie (straight from js-cookie) like this:

import CookieConsent, { Cookies } from "react-cookie-consent";

Then you can use the component anywhere in your React app like so:

<CookieConsent>
    This website uses cookies to enhance the user experience.
</CookieConsent>

You can optionally set some props like this (next chapter will show all props):

<CookieConsent
    location="bottom"
    buttonText="Sure man!!"
    cookieName="myAwesomeCookieName2"
    style={{ background: "#2B373B" }}
    buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
>
    This website uses cookies to enhance the user experience.{" "}
    <span style={{ fontSize: "10px" }}>
    This bit of text is smaller :O
    </span>
</CookieConsent>

One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so:

<CookieConsent
    onAccept={() => {alert("yay!")}}
>

</CookieConsent>

Props

Prop	Type	Default value	Description
location	String, either "top" or "bottom"	bottom	Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window.
children	String or React component		Content to appear inside the bar
disableStyles	boolean	false	If enabled the component will have no default style. (you can still supply style through props)
buttonText	String or React component	I understand	Text to appear on the button
cookieName	string	CookieConsent	Name of the cookie used to track whether the user has agreed.
onAccept	function	() => {}	Function to be called after the accept button has been clicked.
style	Object		React styling object for the bar.
buttonStyle	Object		React styling object for the button.

Styling it

You can provide styling for both the bar and the button. You can do this using the style and buttonStyle prop, both of these will append / replace the default style of the component.

You can use disableStyles={true} to disable any built-in styling.

Examples

changing the bar background to red

<CookieConsent
    style={{ background: "red" }}
>
</CookieConsent>

changing the button font-weight to bold

<CookieConsent
    buttonStyle={{ fontWeight: "bold" }}
>
</CookieConsent>

rainbows!

If you're crazy enough you can even make a rainbow colored bar:

<CookieConsent
    buttonText="OMG DOUBLE RAINBOW"
    cookieName="myAwesomeCookieName2"
    style={{ background: "linear-gradient(to right, orange , yellow, green, cyan, blue, violet)", textShadow: "2px 2px black" }}
    buttonStyle={{background: "linear-gradient(to left, orange , yellow, green, cyan, blue, violet)", color:"white", fontWeight: "bolder", textShadow: "2px 2px black"}}
>
    This website uses cookies to enhance the user experience.{" "}
    <span style={{ fontSize: "10px" }}>
    This bit of text is smaller :O
    </span>
</CookieConsent>

Debugging it

Because the cookie consent bar will be hidden once accepted, you will have to remove the cookie if you want to evaluate changes:

import CookieConsent, { Cookies } from "react-cookie-consent";

{Cookies.remove("myAwesomeCookieName2")}
<CookieConsent
    cookieName="myAwesomeCookieName2"
>
</CookieConsent>