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
• Custom TTL for the cookie
• slide up animation (can be turned off)
• delay before it shows up
• custom icon
• default icon (can be disabled)
• callbacks for accept/deny clicks for additional handling
• clear cookie function
• get cookie value function
• styling configs for all elements

Default design (desktop)

Other free projects and APIs

For more cool and free open source projects and APIs, check out our website

Usage

We will show some different usages of the component, much 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

More examples and explanation on Algobook.

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.