DEV Community

FinalBos5
FinalBos5

Posted on

React with p5.js

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);
        });
    };
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)