Reactjs-cookie-consent NPM

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)

default

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.