Feature: make it compatible with fabric v7

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "support fabricjs from react",
   "author": "Alejandro Soto",
   "license": "MIT",
@@ -22,7 +22,7 @@
     }
   },
   "peerDependencies": {
-    "fabric": "^5 || ^6",
+    "fabric": "^5 || ^6 || ^7",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },

src/lib/defaultShapes.tsx

@@ -8,7 +8,9 @@ export const CIRCLE = {
   left: 100,
   top: 100,
   fill: FILL,
-  stroke: STROKE
+  stroke: STROKE,
+  originX: 'left' as const,
+  originY: 'top' as const
 }
 
 export const RECTANGLE = {
@@ -18,15 +20,19 @@ export const RECTANGLE = {
   stroke: STROKE,
   width: 40,
   height: 40,
-  angle: 0
+  angle: 0,
+  originX: 'left' as const,
+  originY: 'top' as const
 }
 
 export const LINE: DefaultLine = {
   points: [50, 100, 200, 200],
   options: {
     left: 170,
     top: 150,
-    stroke: STROKE
+    stroke: STROKE,
+    originX: 'left' as const,
+    originY: 'top' as const
   }
 }
 
@@ -36,5 +42,7 @@ export const TEXT = {
   top: 100,
   fontSize: 16,
   fontFamily: 'Arial',
-  fill: STROKE
+  fill: STROKE,
+  originX: 'left' as const,
+  originY: 'top' as const
 }

src/lib/index.tsx

@@ -16,8 +16,10 @@ const FabricJSCanvas = ({ className, onReady }: Props) => {
   useEffect(() => {
     const canvas = new fabric.Canvas(canvasEl.current ?? undefined)
     const setCurrentDimensions = () => {
-      canvas.setHeight(canvasElParent.current?.clientHeight || 0)
-      canvas.setWidth(canvasElParent.current?.clientWidth || 0)
+      canvas.setDimensions({
+        width: canvasElParent.current?.clientWidth || 0,
+        height: canvasElParent.current?.clientHeight || 0
+      })
       canvas.renderAll()
     }
     const resizeCanvas = () => {