react-fabric-canvas-designer/dist/Hooks/useReactFabricCanvas.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, useMemo, useRef, useState } from 'react';
import { ReactFabricStore } from '../ReactFabricStore';
const useReactFabricCanvas = ({ canvasWidth, canvasHeight, backgroundColor, fontList }) => {
    const canvasEl = useRef({});
    const [fabricCanvasInstance, setFabricCanvasInstance] = useState(null);
    const reactFabricStore = useMemo(() => {
        if (fabricCanvasInstance)
            return new ReactFabricStore({ fabricCanvasInstance, fontList });
        return null;
    }, [fabricCanvasInstance, fontList]);
    useEffect(() => {
        let initcanvas = null;
        if (!canvasEl.current)
            return;
        canvasEl.current.width = canvasWidth;
        canvasEl.current.height = canvasHeight;
        initcanvas = new Canvas(canvasEl.current, {
            canvasWidth,
            canvasHeight,
            backgroundColor,
            preserveObjectStacking: true
        });
        initcanvas.renderAll();
        setFabricCanvasInstance(initcanvas);
        return () => {
            initcanvas.dispose();
        };
    }, [fontList]);
    return { fabricCanvasInstance, reactFabricStore, UIComponent: _jsx("canvas", { ref: canvasEl, width: canvasWidth, height: canvasHeight, style: { border: '1px solid black' } }) };
};
export default useReactFabricCanvas;