Add generic prop type support

Author: jamesrweb

src/index.tsx

@@ -1,35 +1,36 @@
 import diff from "microdiff";
 import p5 from "p5";
-import React, { createRef, FC, memo, useState } from "react";
+import React, { createRef, memo, useState } from "react";
 import { useIsomorphicEffect } from "rooks";
 
 type Wrapper = HTMLDivElement;
+type WithChildren<T = unknown> = T & { children?: React.ReactNode };
+type InputProps<P extends SketchProps = SketchProps> = P & {
+  sketch: Sketch<P>;
+};
 
-export interface SketchProps {
+export type Sketch<P extends SketchProps = SketchProps> = (
+  instance: P5Instance<P>
+) => void;
+export type SketchProps = {
   [key: string]: any;
-}
-
-export interface Sketch {
-  (instance: P5Instance): void;
-}
-
-export interface P5WrapperProps extends SketchProps {
-  sketch: Sketch;
-}
-
-export interface P5Instance extends p5 {
-  updateWithProps?: (props: SketchProps) => void;
-}
+};
+export type P5WrapperProps<P extends SketchProps = SketchProps> = WithChildren<
+  InputProps<P>
+>;
+export type P5Instance<P extends SketchProps = SketchProps> = p5 & {
+  updateWithProps?: (props: P) => void;
+};
 
 function createCanvas(sketch: Sketch, wrapper: Wrapper): P5Instance {
   return new p5(sketch, wrapper);
 }
 
-const ReactP5WrapperComponent: FC<P5WrapperProps> = ({
+function ReactP5WrapperComponent<P extends SketchProps = SketchProps>({
   sketch,
   children,
   ...props
-}) => {
+}: P5WrapperProps<P>) {
   const wrapperRef = createRef<Wrapper>();
   const [instance, setInstance] = useState<P5Instance>();
 
@@ -50,9 +51,12 @@ const ReactP5WrapperComponent: FC<P5WrapperProps> = ({
   useIsomorphicEffect(() => () => instance?.remove(), []);
 
   return <div ref={wrapperRef}>{children}</div>;
-};
+}
 
-function propsAreEqual(previous: P5WrapperProps, next: P5WrapperProps) {
+function propsAreEqual<P extends SketchProps = SketchProps>(
+  previous: P5WrapperProps<P>,
+  next: P5WrapperProps<P>
+) {
   const differences = diff(previous, next);
 
   return differences.length === 0;