Set a custom cookie

🙋Get Help
1

hi!

I need to set a custom cookie for create a “Splash Screen” in my site. I want to set this cookie after the splash screen disappear (now i have a div with an animation), how can i set this cookie with ssr? Is there a library i can use?

Thanks!

2

Hi @simone.tissi, you can set and access cookie with the npm package called universal-cookie, and for this, you can install this package

npm install universal-cookie

After installing just import it to the page where you want to use it. Here is a little example that can help you

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('isSplashScreenShown', 'true', { path: '/' });
console.log("isSplashScreenShown = ", cookies.get('isSplashScreenShown')); // true

If you want to use this cookie value before site loading, then you can send this cookie to the server using beforeSSR function. In src/Index.js you can see all your actions.

Inside actions → theme, you can create the below function

beforeSSR: async ({ state, actions }) => {
//do your stuff like API call and you can also send your cookie to API
}

I just got an assumption of your question and tried to give the answer. I hope this can give you enough idea to explore a lot.

3

Hi @santoshdevnath15 ,
i received this error:

Schermata 2021-10-07 alle 13.54.18
Schermata 2021-10-07 alle 13.54.181896Ă—594 154 KB

I try to do this:

 const getCookie = () => {
    console.log('isSplashScreenShown = ', cookies.get('isSplashScreenShown')) // true
    return cookies.get('isSplashScreenShown')
  }

In the component I have:
{getCookie() ? <></> : <SplashContent cookies={cookies} />}

and inside SplashContent component:

const setAccessCookie = () => {
    cookies.set('isSplashScreenShown', 'true', {
      path: '/',
      expires: new Date(Date.now() + 1000 * 60 * 5),
    })
  }

That is triggered after the animation finish

4

I think the code should be like this

{getCookie() ? null : <SplashContent cookies={cookies} />}
5

No problem with first load, but when i refresh the page i have the same problem

6

Can you please elaborate on the error you are facing? And the previous waring you were getting, I think that is just a warning that should not affect the logic.

Or you can show the current error, that you are facing.

7

It seems that the html generated on the server side is not equal with the html on the client side. The warning is the same as before but it “breaks” the interface when I refresh the page.

Schermata 2021-10-07 alle 14.11.40
Schermata 2021-10-07 alle 14.11.401218Ă—716 133 KB

This is what I expect: I enter the site, I am shown the splash screen, once the animation is finished I set the cookie, so as not to review the splash screen for 5 minutes, after which the cookie will have expired and the splash screen will be shown again.

I can post here the full code of the component where i set the cookie. I get the cookie in the root and i check if is true (code above)

8

Hi @simone.tissi,

What about using local storage? Like I have done here:

9

hi @kasper ,
I can try but it could be a bit complex to set the cookie after the CSR, because I should set it after the animation is finished. Then since I would like to give it a expiration date I would like to avoid working with the state, otherwise I would have to re-render everything