I've used Fabric for a proof-of-concept project and the general idea is the same as for, say, D3. Keep in mind that Fabric operates over DOM elements, while React renders data into DOM, and usually the latter is deferred. There are two things that will help you make sure your code works:
Wait until component is mounted
To do that, place your Fabric instantiation into componentDidMount:
import React, { Component } from 'react';
import { fabric } from 'react-fabricjs';
import styles from './MyComponent.css';
class MyComponent extends Component {
componentWillMount() {
// dispatch some actions if you use Redux
}
componentDidMount() {
const canvas = new fabric.Canvas('c');
// do some stuff with it
}
render() {
return (
<div className={styles.myComponent}>
<canvas id="c" />
</div>
)
}
}
Placing Fabric constructor into componentDidMount ensures it won't fail because by the moment this method is executed, the DOM is ready. (but the props sometimes aren't, just in case if you use Redux)
Use refs to calculate actual width and height
Refs are references to actual DOM elements. You can do with refs what you can do with DOM elements using DOM API: select children, find parent, assign style properties, calculate innerHeight and innerWidth. The latter is precisely what you need:
componentDidMount() {
const canvas = new fabric.Canvas('c', {
width: this.refs.canvas.clientWidth,
height: this.refs.canvas.clientHeight
});
// do some stuff with it
}
Don't forget to define refs property of this. To do that, you'll need a constructor. The whole thing would look like
import React, { Component } from 'react';
import { fabric } from 'react-fabricjs';
import styles from './MyComponent.css';
class MyComponent extends Component {
constructor() {
super()
this.refs = {
canvas: {}
};
}
componentWillMount() {
// dispatch some actions if you use Redux
}
componentDidMount() {
const canvas = new fabric.Canvas('c', {
width: this.refs.canvas.clientWidth,
height: this.refs.canvas.clientHeight
});
// do some stuff with it
}
render() {
return (
<div className={styles.myComponent}>
<canvas
id="c"
ref={node => {
this.refs.canvas = node;
} />
</div>
)
}
}
Mix Fabric with component state or props
You can make your Fabric instance react to any component props or state updates. To make it work, simply update your Fabric instance (which, as you could see, you can store as part of component's own properties) on componentDidUpdate. Simply relying on render function calls won't be really helpful because none of the elements that are rendered would ever change on new props or new state. Something like this:
import React, { Component } from 'react';
import { fabric } from 'react-fabricjs';
import styles from './MyComponent.css';
class MyComponent extends Component {
constructor() {
this.refs = {
canvas: {}
};
}
componentWillMount() {
// dispatch some actions if you use Redux
}
componentDidMount() {
const canvas = new fabric.Canvas('c', {
width: this.refs.canvas.clientWidth,
height: this.refs.canvas.clientHeight
});
this.fabric = canvas;
// do some initial stuff with it
}
componentDidUpdate() {
const {
images = []
} = this.props;
const {
fabric
} = this;
// do some stuff as new props or state have been received aka component did update
images.map((image, index) => {
fabric.Image.fromURL(image.url, {
top: 0,
left: index * 100 // place a new image left to right, every 100px
});
});
}
render() {
return (
<div className={styles.myComponent}>
<canvas
id="c"
ref={node => {
this.refs.canvas = node;
} />
</div>
)
}
}
Simply replace image rendering with the code you need and that depends on new component state or props. Don't forget to clean up the canvas before rendering new objects on it, too!
