How can I use Fabric.js with React?

Question

I have an application using heavily HTML5 canvas via Fabric.js. The app is written on top of Angular 1.x, and I am planning to migrate it to React. My app allows writing tex

Answer 1

We had this same issue in our app of how to use Fabric.js inside of react. My recommendation is to treat fabric as an uncontrolled component. Have fabric instance that your whole app can talk to and make fabric calls and then when anything changes use .toObject() call to put the whole fabric state into your Redux store. Then your React app can read fabric state from your global Redux state as you would do in any normal React app.

I can't get an example working in the StackOverflow code editor but here is a JSFiddle example that implements the pattern I am recommending.