Property 'initGradient' does not exist on type

Question

I am building a website with react and typescript. I am having trouble implementing a gradient background that I found on -"https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/". When I initialise the gradient, I am getting an error " Property 'initGradient' does not exist on type 'Gradient' " The error is raised at 'initGradient' in the code below

This is the code I have written: `

function App() {
  <script src="./Gradient"></script>;
  const gradient = new Gradient();
  gradient.initGradient("#gradient-canvas");
  return (

    <div>
      <canvas
        id="gradient-canvas"
        className="absolute w-50 h-50"
        ></canvas>
    </div>
  );
}

export default App;`

I have created a file 'Gradient.js' which has the code taken from the website linked above. I have also implemented the necessary styling in App.css

I have used the same code to create a website using standard HTML and CSS and was able to implement it correctly. However, I am now trying to build the site in React and Typescript. I have also used tailwind in this project. Any help and advice would be greatly appreciated cause I've spent way too long trying to implement this! Thanks!

Answer 1

It looks like you are trying to import the Gradient.js file by using a script tag? If thats the case, you should use a module import.

import gradient from './Gradient'

function App() {
  gradient.initGradient("#gradient-canvas");

  return (

    <div>
      <canvas
        id="gradient-canvas"
        className="absolute w-50 h-50"
        ></canvas>
    </div>
  );
}

export default App;`

As for the gradient.initGradient("#gradient-canvas"); I would have to see the actual Gradient.js file to see if that would work.

Answer 2

I spent about 6 hours today using various mesh gradient implementations with React before I ended up with this

Gradient component:

 useEffect(() => {
        setTimeout(() => {
            const gradient: any = new Gradient();
            gradient.initGradient("#gradient-canvas");
        }, 1);
    }, []);
    return <canvas id="gradient-canvas" data-transition-in />;

CSS

canvas {
    width: 100%;
    height: 100%;
    --gradient-color-1: #c3e4ff;
    --gradient-color-2: #6ec3f4;
    --gradient-color-3: #eae2ff;
    --gradient-color-4: #b9beff;
}