react-fabric-canvas-designer/dist/FabricCanvas.js

A React-based wrapper for Fabric.js to create interactive and customizable canvas-based designs. This library provides tools for drawing, editing, and managing objects on a canvas with React-friendly APIs.

import { jsx as _jsx } from "react/jsx-runtime";
import { Canvas } from 'fabric';
import { useEffect, useRef } from 'react';
export const CanvasRenderer = ({ canvasWidth, canvasHeight, backgroundColor }) => {
    const canvasEl = useRef({});
    const fabricCanvasInstance = useRef({});
    useEffect(() => {
        if (!canvasEl.current)
            return;
        fabricCanvasInstance.current = new Canvas(canvasEl.current, {
            canvasWidth,
            canvasHeight,
            backgroundColor,
            preserveObjectStacking: true
        });
        fabricCanvasInstance.current.renderAll();
        return () => {
            if (!fabricCanvasInstance.current)
                return;
            fabricCanvasInstance.current.dispose();
        };
    }, []);
    return { fabricCanvasInstance, UIComponent: _jsx("canvas", { ref: canvasEl, style: { border: '1px solid black' } }) };
};