feat: Improvement of SketchProps typing using Generics?

[junwen-k]

First of all, thank you for this great project!
Right now custom props are not statically typed when using typescript. E.g,

<ReactP5Wrapper
    sketch={sketch}
    background="rgb(255, 255, 255)"  // this is not typed
/>

// props are not strictly typed
p5.updateWithProps = (props) => {
  ...
};

Maybe we can implement generics that allow users to specify custom props so the type will be correct. For instance,

const ReactP5WrapperComponent<P = SketchProps>: FC<P5WrapperProps<P>> = ({
  ...
});

Not tested, but it will probably look something like that.

[jamesrweb]

@junwen-k thats a great idea, I will look into this and try to get it into the next release when it happens.

[Gresliebear]

I am not sure if this is related I want to lets say query data from a API and pass that to the sketch object.

App.js

import './App.css';
import { ReactP5Wrapper } from "react-p5-wrapper";
import sketch from './components/GraphSketch';


const dataObject = "hello"
// we watch to query data object and render onto network 


function App() {
  return (
    <div className="App">
      <div className='container'> 
      <ReactP5Wrapper sketch={sketch} dataObject={dataObject}/>
      </div>
    </div>
  );
}

GraphSketch.js

//   custom chart or chart.js
//   https://editor.p5js.org/aferriss/sketches/S1UTHZBHm

function sketch(p5, dataObject) {
  // we should pass size of div to createCanvas to reformat size of network graph to window?
  // 
    console.log("Hello from inside sketch", dataObject)
    p5.setup = () => p5.createCanvas(1280, 720, p5.WEBGL);
  
    p5.draw = () => {
      p5.background(250);
      p5.normalMaterial();
      p5.push();
      p5.rotateZ(p5.frameCount * 0.01);
      p5.rotateX(p5.frameCount * 0.01);
      p5.rotateY(p5.frameCount * 0.01);
      p5.plane(100);
      p5.pop();
    };
  }

export default sketch````


so on my console log I get Hello from inside sketch undefined

[jamesrweb]

@Gresliebear I think you should check the documentation on handling props as that shows you how to pass down props into your sketches.