@enzsft/react-cookie-consents 😲 Handle cookie consents with ease.

Building cookie banners should be easy. We've written @enzsft/react-cookie-consents to ensure you can get up and running as quickly as possible. It provides a convenient API to write and read cookie consents.

@enzsft/react-cookie-consents uses React Hooks so requires at least React@16.8.0

Motivation 🧐

The React ecosystem was lacking a hooks based cookie consents API when this library was first required.

Getting started 🏎

1. Install the package:

yarn add @enzsft/react-cookie-consents npm install @enzsft/react-cookie-consents

2. Create a cookie banner

The following example renders a cookie banner but only if consent has not already been given.

import { React } from " react " ; import ReactDOM from " react-dom " ; import { CookieConsentsProvider , useCookieConsents , } from " @enzsft/react-cookie-consents " ; const CookieBanner = ( ) => { const cookieConsents = useCookieConsents ( ) ; if ( cookieConsents . get ( ) . length > 0 ) { return null ; } return ( <> < span > We use cookies to help give you the best experience on our site . By continuing you agree to our use of cookies . </ span > < button type = " button " onClick = { ( ) => cookieConsents . add ( " analytics " ) } > Accept and close </ button > < / > ) ; } ; const App = ( ) => { return ( < CookieConsentsProvider cookieName = " cookieConsents " expiryInDays = { 365 } > < CookieBanner /> </ CookieConsentsProvider > ) ; } ; ReactDOM . render ( < App /> , document . getElementById ( " root " ) ) ;

API 🌳

CookieConsentsProvider

Configure the cookie name and when it will expire.

< CookieConsentsProvider cookieName = " cookieConsents " expiryInDays = { 365 } > { children } </ CookieConsentsProvider >

useCookieConsents

React Hook that returns a cookie consent object to read/write cookie consents. Components that use this must be nested within a CookieConsentsProvider as it uses React Context.

Cookie consents are stores in a cookie. When you add, remove or clear consents the cookie is updated.

const Comp = ( ) => { const cookieConsents = useCookieConsents ( ) ; const allConsents = cookieConsents . get ( ) ; cookieConsents . add ( " consent name " ) ; cookieConsents . remove ( " consent name " ) ; cookieConsents . clear ( ) ; } ;

Built with TypeScript with 💖

TypeScript type definitions are bundled in with the module. No need to install an additional module for type definitions.