React Fabric Canvas Designer

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.

Features

• Drawing Tools: Rectangle, Ellipse, Text, and Selection tools.
• Object Manipulation: Resize, rotate, align, and layer objects.
• Customizable Properties: Modify object properties like color, size, font, and more.
• Google Fonts Integration: Load and use Google Fonts dynamically.
• JSON Import/Export: Save and load canvas states as JSON.
• React Components: Prebuilt React components for user-friendly input controls.

Installation

Install the package via npm:

npm install react-fabric-canvas-designer

Usage

Basic Example

import { observer, useGoogleFontsLoader, useReactFabricCanvas } from 'react-fabric-canvas-designer';

const App = observer(() => {
  const { fonts, loading } = useGoogleFontsLoader("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Fredoka:wght@300..700&family=Inconsolata:wght@200..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap")
  const { UIComponent, reactFabricStore } = useReactFabricCanvas({ backgroundColor: "white", canvasHeight: 500, canvasWidth: 1000, fontList: fonts })
  if (loading || !reactFabricStore)
    return <h1>Loading...</h1>
  return <div className="grid grid-cols-12 grid-rows-12 gap-2 bg-gray-400 h-screen w-full">

    <div className="row-span-7 col-start-1 row-start-3">
      <div className='grid grid-cols-2 justify-items-center '>
        {reactFabricStore.availableTools.positionTools.map((tool, i) => {
          return <span key={i}>
            {tool.UIComponent}
          </span>
        })}
      </div>
      <div className='grid grid-cols-2 mt-5  justify-items-center '>
        {reactFabricStore.availableTools.alignmentTools.map((tool, i) => {
          return <span key={i}>
            {tool.UIComponent}
          </span>
        })}
      </div>
    </div>

    <div className="overflow-auto justify-self-center self-center col-span-9 row-span-9 col-start-2 row-start-2">
      {UIComponent}
    </div>

    <div className="col-span-2 row-span-12 col-start-11 row-start-1 overflow-y-scroll">
      {reactFabricStore.availableProperties.map((property, i) => {
        return <div key={i} className='justify-self-center'>
          <label className='text-xl font-semibold'>{property.name}</label>
          {property.UIComponent}
        </div>
      })}
    </div>

    <div className="col-span-7 col-start-3 row-start-11 flex justify-around">
      {reactFabricStore.availableTools.creationTools.map((tool, i) => {
        return <span key={i}>
          {tool.UIComponent}
        </span>
      })}
    </div>
  </div>

})


export default App

Note: Component should be wrapped using observer, otherwise the value might not update as expected

Google Fonts Integration

Use the useGoogleFontsLoader hook to dynamically load Google Fonts:

import React from 'react';
import { useGoogleFontsLoader } from 'react-fabric-canvas-designer';

const App = () => {
  const { fonts, loading } = useGoogleFontsLoader(
    'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'
  );

  if (loading) return <p>Loading fonts...</p>;

  return (
    <div>
      <h1>Available Fonts</h1>
      <ul>
        {fonts.map((font) => (
          <li key={font.name}>{font.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

API Reference

useReactFabricCanvas

Props

Prop	Type	Default	Description
canvasWidth	number	300	Width of the canvas in pixels.
canvasHeight	number	200	Height of the canvas in pixels.
backgroundColor	string	#ffffff	Background color of the canvas.
fontList	FontInfo[]	[]	List of fonts to be used in the canvas.

Returns

Key	Type	Description
UIComponent	React.ReactNode	The canvas component to render.
reactFabricStore	ReactFabricStore	Store instance for managing the canvas.

useGoogleFontsLoader

Props

Prop	Type	Description
cssUrl	string	URL to the Google Fonts CSS file.

Returns

Key	Type	Description
fonts	FontInfo[]	List of loaded fonts.
loading	boolean	Indicates if fonts are still loading.

Input Components

The library provides prebuilt React components for user-friendly input controls:

• InputText: Text input.
• InputNumber: Number input with increment/decrement buttons.
• InputRange: Range slider.
• InputColor: Color picker.
• InputSelect: Dropdown select.

Development

Scripts

• npm run build: Build the library for production.
• npm run dev: Start the development server with live reloading.
• npm run build:css: Build Tailwind CSS.
• npm run dev:css: Watch and build Tailwind CSS.
• npm test: To test the library.

Testing

This package uses Jest and React Testing Library for unit testing. To run tests:

npm run test

Folder Structure

src/
├── Hooks/               # Custom React hooks
├── Objects/             # Fabric.js object wrappers
├── UserFirendlyInput/   # Input components
├── types/               # TypeScript type definitions
├── helpers/             # Utility functions
└── index.tsx            # Entry point

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

Author

Developed by VMMOORTHY.