useCookieConsent - headless cookie management hooks

The problem

A few years ago, I had to implement a cookie consent banner for a project for the first time. At the time I knew nothing about the requirements of GDPR, so I just implemented an all-or-nothing cookie banner that allowed either accepting all or not accepting any cookies. For my use case, it was more than enough, since the only cookie-storing tool we used was Google Analytics, but what if you have more complex requirements? What if you need to manage multiple categories of cookies while also allowing users to accept some of them while not accepting others? That's how this project was born!

The common approach

The first thing you would probably do is to check out whether there's a pre-built component that you can just throw into the app quickly. You will find some packages like vanilla-cookieconsent or react-cookie-consent. These packages might be everything you want, but there's a potential problem with them - they come with their own styling. If you ever tried customizing a pre-built React component you might get PTSD from it - styling the existing DOM structure that you can't see directly is far from user-friendly. So what could be done?

Intruducing the headless approach

Similar to how SAAS products have moved to a "headless" approach, where the service is just providing the backend, and you can write the frontend, I approached this cookie consent banner problem in the same way.

The useCookieConsent project provides a framework-agnostic way of managing cookie consent banner state and logic, without forcing you into using a specific frontend - the only requirement is JavaScript!

A basic usage example for React

To get started in your React application, you just need to follow 3 simple steps:

1. Install the React package:

   npm i @use-cookie-consent/react

1. Wrap your app in the ConsentProvider:

   import { ConsentProvider } from '@use-cookie-consent/react'
   
   export default function App() {
       return {
           <ConsentProvider>
               ...
           </ConsentProvider>
       }
   }

1. Lastly, use the useCookieConsent hook itself. Since we wrapped our app in the ConsentProvider before, if you use this hook in multiple places, React will re-render views independently when the state changes, without forcing you to manage it yourself.

   export const MyComponent = () => {
       const {
           consent,
           acceptAllCookies,
           declineAllCookies,
           acceptCookies
       } = useCookieConsent();
   
       return <>
           ...
       </>
   }

Closing notes

Hopefully, now you can see how this project is different from other ones, and I'm hoping you will use it in your project!

One thing to note is that until this project has reached version 1.0.0, the API might change. It is best to refer to the main repository and follow from there.

You can always find the project here: github.com/use-cookie-consent/use-cookie-consent