reactjs-cookie-consent

React cookie consent

A simple responsive cookie consent component for React applications. The component is configurable to support any kind of styling. We also support

• Custom cookie names
• Your own TTL
• slide up animation
• delay before it shows up
• custom icon
• callbacks for accept/deny clicks for additional handling
• clear cookie function
• get cookie value function

Usage

We will show some different usages of the component, more examples can be found on Algobook.

Default

import { CookieBanner } from "reactjs-cookie-consent";
<CookieBanner />;

With policy link

<CookieBanner policyLink="/cookiepolicy" />

Custom TTL and cookie name

<CookieBanner ttlDays={120} cookieName="my_cookie_name" />

Callbacks

<CookieBanner
  onAcceptClick={() => console.log("Accepted")}
  onDenyClick={() => console.log("Denied")}
/>

Custom styling

<CookieBanner
  bannerStyles={{ backgroundColor: "rgb(50 48 48 / 50%)" }}
  headlineStyles={{ color: "white" }}
  textStyles={{ color: "white" }}
  acceptBtnStyles={{ color: "white", backgroundColor: "#19da3b" }}
  denyBtnStyles={{ color: "white", backgroundColor: "#9c1717" }}
  linkStyles={{ color: "#00437d" }}
/>

Functions

import {
  cookieBanner,
  clearConsentCookie,
  getConsentCookie }
from "reactjs-cookie-consent";

  clearConsentCookie(name?) // provide name if you are not using our default
  getConsentCookie(name?) // provide name if you are not using our default

Some images and gifs

We will show some images of how it looks, both per default and with some (really nice) custom styling :)

Default styling, mobile

Desktop, custom icon

Slide up animation on mobile gif (with some delay)

Custom styling desktop

Custom styling mobile

Feedback

Is something missing? Not working? Or any feature requests? Just email us, we love to improve our software. Email can be found here.