Shows Blank Screen after Using Globally

[Muhammad Abu Bakr]

It keeps showing a blank page when put in App.js

[Stephen Scaff]

@creative-muhd can you provide more details on this issue?
What your build and environment looks like, etc. A reduced test case would be ideal.

In most builds, like the demo, you'd include like

import React from 'react'
import AnimatedCursor from 'react-animated-cursor'

export default function App() {
  return (
    <div className="App">
     <AnimatedCursor
        dotSize={8}
        outlineSize={8}
        innerSize={8}
        outerSize={8}
        color='220, 90, 90'
        outlineAlpha = {0.4}
        outerAlpha = {0.4}
      />
      // Your other components
    </div>
  )
}

In a Next app, inside app.tsx, you'd include it like

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

function App({ Component, pageProps }: AppProps) {

  return (
     <AnimatedCursor
        dotSize={8}
        outlineSize={8}
        innerSize={8}
        outerSize={8}
        color='220, 90, 90'
        outlineAlpha = {0.4}
        outerAlpha = {0.4}
      />
    // Your other stuff
  )
}

[Muhammad Abu Bakr]

@stephenscaff Thank you I have discovers the issue, I had more than one react on the same app.

[Stephen Scaff]

Okay... closing this for now then. Thanks.