Tailor

Tailor is a react library that stitches together react and Fabric.js.

Installation

• npm

  First install tailor

  $ npm i @openthingies/tailor

  Then install fabric.js

  $ npm i fabric

• yarn

  First install tailor

  $ yarn add @openthingies/tailor

  Then install fabric.js

  $ yarn add fabric

Examples

Basic Example

import useTailor from "@openthingies/tailor";
import { fabric } from "fabric";
import { useEffect } from "react";

export default function Canvas() {

    const { add, htmlRef } = useTailor({ width: 600, height: 400 });

    useEffect(() => {
        add(
            new fabric.Rect({
                left: 50,
                top: 50,
                width: 30,
                height: 30,
                fill: "red"
            })
        );
    }, []);

    return (
        <canvas ref={htmlRef} />
    );

}