React Basic Hooks - useEffects sample

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<div id="root"></div>

React

const {useState, useEffect, useRef, useCallback} = React;

SCALE = 0.5
const useFabric = (onChange) => {



  const fabricRef = useRef();

  const disposeRef = useRef();
  return useCallback(
    (node) => {
      if (node) {
        fabricRef.current = new fabric.Canvas(node);
        if (onChange) {
          disposeRef.current = onChange(fabricRef.current);
        }
      } else if (fabricRef.current) {
        fabricRef.current.dispose();
        if (disposeRef.current) {
          disposeRef.current();
          disposeRef.current = undefined;
        }
      }
    },
    [onChange]
  );
};

function Example() {
  const ref = useFabric((canvas) => {
     canvas.setZoom(SCALE)

  canvas.add(new fabric.Text("hello"))
  canvas.renderAll()
  });
  
  const onDownload = () => {
  const link = document.createElement("a")
  link.download = "test.png"
  canvas = document.getElementsByClassName(
      "lower-canvas"
    )[0]
   link.href = canvas.toDataURL();
   link.click();
  }


  return (
  <div>
      <div style={{ display: "inline-block", border: "solid" }}>
        <canvas
          ref={ref}
          width={100 * SCALE}
          height={100 * SCALE}
        />
      </div>
              <button onClick={onDownload}>Download canvas</button>
      </div>
  );
}

ReactDOM.render( <Example />, document.getElementById('root') );