convert sine-waves package examples to react component - reactjs

Question

I'm trying to use sine-waves package sine-waves package , in react app, first thing I did is looking for examples, border wave particularly and start to convert it to react component and when I tried to start the app, it gives me this error :
is there a problem in canvas with react
any help will be appreciated ...
this is my attempt:
import React from 'react';
import SineWaves from 'sine-waves';
import _ from 'lodash';
class SineWave extends React.Component {
width = 300;
height = 300;
amplitude = 20;
speed = 1;
ease = 'SineInOut';
waves = [
{
timeModifer: 2,
lineWidth: 1,
amplitude: this.amplitude,
wavelength: 100,
segmentLength: 1,
strokeStyle: 'rgba(255, 255, 255, 0.3333)',
type: 'Sawtooth',
},
{
timeModifer: 2,
lineWidth: 1,
amplitude: -this.amplitude / 2,
wavelength: 100,
segmentLength: 1,
strokeStyle: 'rgba(255, 255, 255, 0.3333)',
type: 'Sawtooth',
},
{
timeModifer: 2,
lineWidth: 1,
amplitude: -this.amplitude,
wavelength: 100,
segmentLength: 1,
strokeStyle: 'rgba(255, 255, 255, 0.3333)',
type: 'Square',
},
];
render() {
const { speed, width, height, ease, waves } = this;
const bottomWaves = new SineWaves({
el: document.getElementById('bottom-waves'),
speed,
width,
height,
ease,
waves: _.clone(waves, true),
rotate: 0,
resizeEvent() {
let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
let index = -1;
let { length } = this.waves;
while (++index < length) {
this.waves[index].strokeStyle = gradient;
}
// Clean Up
index = void 0;
length = void 0;
gradient = void 0;
},
});
const topWaves = new SineWaves({
el: document.getElementById('top-waves'),
speed: -speed,
width,
height,
ease,
waves: _.clone(waves, true),
rotate: 0,
resizeEvent() {
let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
let index = -1;
let { length } = this.waves;
while (++index < length) {
this.waves[index].strokeStyle = gradient;
}
// Clean Up
index = void 0;
length = void 0;
gradient = void 0;
},
});
const leftWaves = new SineWaves({
el: document.getElementById('left-waves'),
speed,
width: height,
height: width,
ease,
waves: _.clone(waves, true),
rotate: 90,
resizeEvent() {
let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
let index = -1;
let { length } = this.waves;
while (++index < length) {
this.waves[index].strokeStyle = gradient;
}
// Clean Up
index = void 0;
length = void 0;
gradient = void 0;
},
});
const rightWaves = new SineWaves({
el: document.getElementById('right-waves'),
speed: -speed,
width: height,
height: width,
ease,
waves: _.clone(waves, true),
rotate: 90,
resizeEvent() {
let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
let index = -1;
let { length } = this.waves;
while (++index < length) {
this.waves[index].strokeStyle = gradient;
}
// Clean Up
index = void 0;
length = void 0;
gradient = void 0;
},
});
return (
<>
<h1 id="title">
SineWaves.js
</h1>
<h2 id="sub-title">Border Example</h2>
<div id="box">
<h2 id="example-title">Animated Borders</h2>
<canvas className="wave" id="top-waves" />
<canvas className="wave" id="left-waves" />
<canvas className="wave" id="bottom-waves" />
<canvas className="wave" id="right-waves" />
</div>
</>
);
}
}
export default SineWave;

Answer 1

Generally speaking a message like
uncaught : No Canvas Selected would either mean you didn't specify a canvas target at all or it simply can't find it because it doesn't exist.
Looking at the parameters you're passing to the constructor of SineWaves
const rightWaves = new SineWaves({
el: document.getElementById('right-waves'),
you're telling it to look for a <canvas> element with the id right-waves.
Try setting one up like:
<canvas id="right-waves"></canvas>