Update ref handling

README.md

@@ -28,7 +28,7 @@ yarn add react-canvas-wrapper
 
 **Properties**
 
-* `canvasRef:Function` - Function to set reference to `<canvas>` element. (Default: `(element) => { this.canvas = element; }`)
+* ~`canvasRef:Function` - Function to set reference to `<canvas>` element. (Default: `(element) => { this.canvas = element; }`)~ _**Note:** This can now be done by passing a simple `ref` prop. like you normally would in React.
 * `draw:Function` - Callback called when props change on the component. (Default: `(canvas) => {}`)
 * `width:Number` - Width of the canvas @ 1x. (Default: `30`)
 * `height:Number` - Height of the canvas @ 1x. (Default: `30`)

src/index.js

@@ -26,7 +26,7 @@ const Canvas = forwardRef((props, ref) => {
   const internalRef = ref || useRef();
 
   useEffect(() => {
-    draw(internalRef);
+    draw(internalRef.current);
   }, [JSON.stringify(props)]);
 
   const styleProp = useMemo(() => {

types/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react'
+
+/**
+ *  Canvas
+ */
+
+export interface CanvasProps {
+  width?: number;
+  height?: number;
+  pixelRatioAware?: boolean;
+  draw?: (canvas: React.RefObject<HTMLCanvasElement>) => void;
+}
+
+export class Canvas extends React.Component<CanvasProps> {}

types/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es6"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noEmit": true
+  }
+}