How to use this with nextjs?

[krishnerkar]

I am not able to use this in nextjs, everytime i import it in a class and try to call it in componentDidMount(), the import throws an error called window not defined

and when i try dynamic importing like this

const grained = dynamic(
    () => {
      return import ('../../grained.min.js');
    },
    { ssr: false }
  );

and call it in componentdidmount like this

componentDidMount(){
        grained('#container', {});
    }

i get an error, cannot call a class as a function

[larsmosr]

Put grained.js in your public folder and than load script via Nextjs Script Tag:

<Script
      src="/grained.js" 
      onLoad={() => { 
          var options = { 
                animate: true, 
                patternWidth: 100, 
                patternHeight: 100, 
                grainOpacity: 0.5, 
                grainDensity: 1, 
                grainWidth: 1, 
                grainHeight: 1, 
           };

 grained("#container", options); }} />

[SaadBazaz]

@larovski Thanks, this worked!

[SaadBazaz]

Hint: This might create some issues when rerouting. E.g. Suppose you have two pages, A and B.
If grained #container is on A, and you route to B, then route back to A, the grained container might start shaking violently and causing problems in scrolling.

To prevent this, I encapsulated the #container in a parent which had overflow:hidden applied on it.

An example:

import { useRef, } from 'react';
import Script from 'next/script';

export default function PageA() {

  const grained_container = useRef();

  return (
        <div style={{
          position: "absolute",
          zIndex: 999,
          height: "100%",
          width: "100%",
          pointerEvents: "none",
          top:0,
          paddingLeft: 0,
          paddingRight: 0,
          paddingTop: 0,
          overflow: "hidden",
        }}>
        <div 
        ref={grained_container}
        id="container" style={{
          height: "100%",
          width: "100%",
        }}/>
        { typeof window !== "undefined" ? 
        window.grained ? <></> :  
        <Script
        src="/grained.js" 
        onLoad={() => {
            var options = { 
                  animate: true, 
                  patternWidth: 300, 
                  patternHeight: 300, 
                  grainOpacity: 0.05, 
                  grainDensity: 1, 
                  grainWidth: 1, 
                  grainHeight: 1, 
                  grainChaos: 0.2,
                  grainSpeed: 10
              };
  
          grained(grained_container.current, options);

        }} />
        :
        <></>  
        }
        </div>
        )
}

Note: I use useRef because I've edited grained.js . You can choose to use it as "#container".

[larsmosr]

@SaadBazaz thx for coming back and provide an extended solution 👍🏻

[sudhanshu0001]

@larovski you are right but we create build and then showed the error like grained is not defined