React Components - FabricJS Design Tool

📦 Import

import { 
  CanvasWrapper,
  Header,
  LeftSidebar,
  RightSidebar,
  BottomToolbar,
  QRCodeDialog,
  ShapeDialog,
  KeyboardShortcutsModal
} from '@rifrocket/fabricjs-design-tool/ui';

🖼️ Main Components

<CanvasWrapper />

The core canvas component that wraps Fabric.js functionality with enhanced features.

<CanvasWrapper
  width={1000}
  height={700}
  backgroundColor="#f5f5f5"
  onCanvasReady={setCanvas}
/>

Props:

interface CanvasWrapperProps {
  width?: number;           // Canvas width (default: 800)
  height?: number;          // Canvas height (default: 600)
  backgroundColor?: string; // Canvas background (default: '#ffffff')
  className?: string;       // CSS class
  style?: React.CSSProperties;
  onCanvasReady?: (canvas: fabric.Canvas) => void;
  onSelectionChange?: (selected: fabric.Object[]) => void;
  onObjectModified?: (object: fabric.Object) => void;
}

<Header />

Application header with file operations, zoom controls, and settings.

<Header
  title="My Design Tool"
  showLogo={true}
  onExport={handleExport}
/>

<LeftSidebar />

Tool palette with shapes, drawing tools, and templates.

<LeftSidebar
  collapsed={false}
  tools={customTools}
  onToolSelect={handleTool}
/>

<RightSidebar />

Properties panel for selected objects with styling options.

<RightSidebar
  selectedObject={selected}
  onPropertyChange={handleChange}
/>

🚀 Complete Example

import React, { useState } from 'react';
import { 
  CanvasWrapper, 
  Header, 
  LeftSidebar, 
  RightSidebar 
} from '@rifrocket/fabricjs-design-tool/ui';

function MyDesignTool() {
  const [canvas, setCanvas] = useState(null);
  const [selected, setSelected] = useState(null);
  
  const handleExport = (format) => {
    if (canvas) {
      const dataURL = canvas.toDataURL(format);
      // Handle export logic
    }
  };

  const handleToolSelect = (tool) => {
    console.log('Selected tool:', tool);
  };

  const handlePropertyChange = (property, value) => {
    if (selected) {
      selected.set(property, value);
      canvas.renderAll();
    }
  };
  
  return (
    <div className="h-screen flex flex-col">
      <Header
        title="My Design Tool"
        onExport={handleExport}
      />
      <div className="flex flex-1">
        <LeftSidebar
          onToolSelect={handleToolSelect}
        />
        <div className="flex-1">
          <CanvasWrapper
            width={1000}
            height={700}
            backgroundColor="#f8f9fa"
            onCanvasReady={setCanvas}
            onSelectionChange={(objects) => setSelected(objects[0])}
          />
        </div>
        <RightSidebar
          selectedObject={selected}
          onPropertyChange={handlePropertyChange}
        />
      </div>
    </div>
  );
}

export default MyDesignTool;

💬 Dialog Components

<QRCodeDialog />

Dialog for generating and customizing QR codes.

<QRCodeDialog
  isOpen={showQRDialog}
  onClose={() => setShowQRDialog(false)}
  onGenerate={handleQRGenerate}
/>

<ShapeDialog />

Dialog for creating custom shapes with properties.

<ShapeDialog
  isOpen={showShapeDialog}
  onClose={() => setShowShapeDialog(false)}
  onCreateShape={handleCreateShape}
/>

<KeyboardShortcutsModal />

Modal displaying available keyboard shortcuts.

<KeyboardShortcutsModal
  isOpen={showShortcuts}
  onClose={() => setShowShortcuts(false)}
/>

<BottomToolbar />

Bottom toolbar with zoom controls and status information.

<BottomToolbar
  zoom={zoomLevel}
  onZoomChange={setZoomLevel}
  objectCount={canvas?.getObjects().length || 0}
/>

🎨 Styling & Customization

CSS Classes

All components accept standard React props including className and style for custom styling.

<CanvasWrapper
  className="custom-canvas-wrapper"
  style={{ border: '2px solid #3498db' }}
/>

<LeftSidebar
  className="w-64 bg-gray-100"
  style={{ boxShadow: '2px 0 4px rgba(0,0,0,0.1)' }}
/>

⚛️ React Components