Installation
1
npm install paper react-reconciler react-paper-bindings
Usage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { useCallback, useState } from "react";
import { Canvas, View, Layer, Rectangle } from 'react-paper-bindings';
function App() {
const [color, setColor] = useState('red');
const toggleColor = useCallback(() => {
setColor(color === 'red' ? 'blue' : 'red');
}, [color]);
return (
<Canvas width={400} height={300}>
<View>
<Layer>
<Rectangle
center={[100, 100]}
fillColor={color}
size={[50, 50]}
onClick={toggleColor}
/>
</Layer>
</View>
</Canvas>
);
}
export default App;