{Bug} Getting 'Window is not defined after installing and importing as per docs

[milindgoel15]

Using next.js with standard import in custom js file and importing it into the _app.js gives window not defined error. Importing directly gives the same error though. Any solution?

edit: it seems like we still need to turn ssr false to make it work in next.js.

However, i have another question now. I am using both light mode and dark mode based website so is there a way to turn color into something else on light mode?

[stephenscaff]

Hi.

Yeah, you will probably need to go the dynamic import road. I've updated the docs to make that more clear.

In _app.js:

import dynamic from 'next/dynamic'

const AnimatedCursor = dynamic(() => import('react-animated-cursor'), {
  ssr: false
});

<AnimatedCursor/>

Color Modes

In terms of light / dark mode, you could update the color properties when you switch color mode states. OR, I've just pushed some updates to make that even easier.

You can now add your own styles objects for the inner and outer cursor parts - innerStyle and outerStyle. This will allow you to simply pass and update a css variable for your cursor color.

For example, create a css var (--cursor-color) to manage the cursor color.

html {
  --cursor-color: #333
}

html.dark-mode {
  --cursor-color: #fff
}

We're updating the var here based on a dark-mode class being added to html tag. But, you could also just update the var directly in your js:

document.documentElement.style.setProperty('--cursor-color', '#fff');

Then, pass --cursor-color to your cursor via outerStyle and innerStyle props:

<AnimatedCursor
  outerStyle={{
    backgroundColor: 'var(--cursor-color)'
  }}
  innerStyle={{
    backgroundColor: 'var(--cursor-color)'
  }}
/>

Or, with a Donut style cursor

<AnimatedCursor
  innerSize={8}
  outerSize={35}
  innerScale={1}
  outerScale={1.7}
  outerAlpha={0}
  outerStyle={{
    border: '3px solid var(--cursor-color)'
  }}
  innerStyle={{
    backgroundColor: 'var(--cursor-color)'
  }}
/>

Hope that helps. Let me know how it goes.

[milindgoel15]

I am now using next-themes based switching and using conditions to render rbg string value based on theme. Might give the new prop style a go in the future. So i am closing this issue with this.

Also, i just noticed in the readme section, the https://github.com/stephenscaff/react-animated-cursor#add-to-nextjs & https://github.com/stephenscaff/react-animated-cursor#with-next--ssr-server-side-rendering are duplicates. I think one of em can be removed.

[stephenscaff]

@milindgoel15 ha - true. Sadly, I must admit to the dupe being on purpose. Added it to a new Quickstart section, but then I was thinking, just in case you missed it in the Quickstart....

Guess that's not needed / dumb.