How I can change the JavaScript code into React?
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
Note that I am using Fabric.js library. Here is my code:
export default function App() {
const { editor, onReady } = useFabricJSEditor();
onAddCircle = () => {
editor.addCircle();
};
const onAddRectangle = () => {
editor.addRectangle();
};
function insertText() {
editor.canvas.add(new fabric.IText('Tap and Type', {
left: 40,
top: 100,
fontFamily: 'comic sans ms',
fill: 'red',
fontSize: 28,
}));
}
//just added this in
return (
<div className="App">
<Navbar />
<div className="bg-light border-top p-4 mb-3">
<h1 className="display-5">Customize Your Shirt</h1>
</div>
</div>
In Reactjs you can attach the whole function to the onChange event
Something like this:
<input
onChange={function () {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
}}
type="color"
value=""
id="text-color"
size="10"
/>;