Disclaimer: This is for learning purposes and not a real project, if what I am trying to achieve makes no sense, feel free to point that out.
What I want to do:
If the user visits my website, he has to accept cookies.
If he tries to signup, but has not yet accepted the cookies, signup is not possible and there will be a message hinting at this.
What I have done so far:
I installed a third-party library to display a cookie-consent banner on entering the website.
import CookieConsent from 'react-cookie-consent'
To guarantee that the consent-banner shows up everywhere, I added the CookieConsent
-component inside my _app.js
file, which is used whenever a page is intialized. This works fine, I can see the cookie-banner whereever I go, until I accept the cookie.
Now here is where I am uncertain of how to address this properly.
How do listen to a change of my CookieConsent
(which is created by the above mentioned 3rd party library, it has a boolean value inside)?
When I am in control of my component, I always use useState
and, if needed, useEffect
.
But this time, the value of a cookie doesn't get changed by a react-hook, so listening to a change / re-rendering of a page won't work.
So yeah, that's pretty much the question: What is the proper way to do this?
All I can come up with in my mind is to create my own cookie-component and add subscriber/observer events there. But this seems like a bad approach, because then I had to create my own components for CookieConsent and CookieRetrieval, therefore re-inventing the wheel.