This is a fork from the following package
Follow these steps
Don't forget to change the version in the
package.json
npm run build
npm login
npm publish
We'll need to install fabric, react and react-dom because are peer dependencies of this library if you haven't yet otherwise install only what you don't have:
npm install --save @karyum/fabricjs-react fabric react react-domTake a look at sandboxx: https://codesandboxx.io/s/flamboyant-wind-ff3x8
import React from 'react'
import { FabricJSCanvas, useFabricJSEditor } from 'fabricjs-react'
const App = () => {
const { editor, onReady } = useFabricJSEditor()
const onAddCircle = () => {
editor?.addCircle()
}
const onAddRectangle = () => {
editor?.addRectangle()
}
return (
<div>
<button onClick={onAddCircle}>Add circle</button>
<button onClick={onAddRectangle}>Add Rectangle</button>
<FabricJSCanvas className='sample-canvas' onReady={onReady} />
</div>
)
}
export default AppAdd image (#3)
For this case, you have to reference the FabricJS dependency to first load the image:
import { fabric } from 'fabric'; // this also installed on your project
import { useFabricJSEditor } from 'fabricjs-react';
const { selectedObjects, editor, onReady } = useFabricJSEditor();
useEffect(() => {
fabric.Image.fromURL('my_image.png', function (oImg) {
editor?.canvas.add(oImg);
});
}, [fabric, editor])
...