How to use PaperJs with React?
https://github.com/react-paper/react-paper-bindings
There's a package for you to see how paperjs and reactjs being implemented together.
You can use the package as is (last update seems a bit fine on december 2018), or you can see how the author implementing paperjs into a reactjs project.
For those who are looking for using paperjs in create-react-app with hooks.
App.js
import Canvas from './Canvas';
import './App.css';
function App() {
return (
<div>
<Canvas />
</div>
);
}
export default App;
Canvas.js
import React, { useRef, useEffect } from 'react';
import Paper from 'paper';
import draw1 from '../drawings/draw1';
const Canvas = props => {
const canvasRef = useRef(null)
useEffect(() => {
const canvas = canvasRef.current;
Paper.setup(canvas);
draw1();
}, []);
return <canvas ref={canvasRef} {...props} id="canvas" resize="true" />
}
export default Canvas;
draw1.js
import Paper from "paper";
const draw1 = () => {
let myPath = new Paper.Path();
Paper.view.onMouseDown = (event) => {
myPath.strokeColor = "white";
myPath.strokeWidth = 3;
};
Paper.view.onMouseDrag = (event) => {
myPath.add(event.point);
};
Paper.view.draw();
};
export default draw1;