React with p5.js

FinalBos5 — Wed, 21 Jul 2021 06:23:23 +0000

I'm trying to use p5 library with react. everything is working fine except I can not use some of the p5s functions like: keyPressed(), keyReleased(). while functions such as mouseClicked() and mousePressed() work just fine.

const setup = (p5, canvasParentRef) => {
        // use parent to render the canvas in this ref
        // (without that p5 will render the canvas outside of your component)
        console.log(props.test)
        const cnv = p5.createCanvas(500, 500).parent(canvasParentRef);
        plr = new Player(p5.width / 2, p5.height / 2);
        food = new Food(p5);

        cnv.mouseClicked((event) => {
            console.log(event);
        })
        cnv.keyReleased((event) => {
            console.log(event);
        });
    };

this is what the code looks like. mouseClicked gives no errors while keyReleased and other functions which are related to keyboard input give error saying TypeError: cnv.keyReleased is not a function

DEV Community: FinalBos5

React with p5.js