react-konva
Advanced tools
Comparing version 18.2.8 to 18.2.9
@@ -17,6 +17,15 @@ /** | ||
function usePrevious(value) { | ||
const ref = React.useRef(); | ||
const ref = React.useRef({}); | ||
React.useLayoutEffect(() => { | ||
ref.current = value; | ||
}); | ||
React.useLayoutEffect(() => { | ||
return () => { | ||
// when using suspense it is possible that stage is unmounted | ||
// but React still keep component ref | ||
// in that case we need to manually flush props | ||
// we have a special test for that | ||
ref.current = {}; | ||
}; | ||
}, []); | ||
return ref.current; | ||
@@ -23,0 +32,0 @@ } |
@@ -45,6 +45,15 @@ /** | ||
function usePrevious(value) { | ||
const ref = react_1.default.useRef(); | ||
const ref = react_1.default.useRef({}); | ||
react_1.default.useLayoutEffect(() => { | ||
ref.current = value; | ||
}); | ||
react_1.default.useLayoutEffect(() => { | ||
return () => { | ||
// when using suspense it is possible that stage is unmounted | ||
// but React still keep component ref | ||
// in that case we need to manually flush props | ||
// we have a special test for that | ||
ref.current = {}; | ||
}; | ||
}, []); | ||
return ref.current; | ||
@@ -51,0 +60,0 @@ } |
@@ -5,3 +5,3 @@ { | ||
"description": "React binding to canvas element via Konva framework", | ||
"version": "18.2.8", | ||
"version": "18.2.9", | ||
"keywords": [ | ||
@@ -22,3 +22,3 @@ "react", | ||
"@types/react-reconciler": "^0.28.2", | ||
"its-fine": "^1.0.6", | ||
"its-fine": "^1.1.1", | ||
"react-reconciler": "~0.29.0", | ||
@@ -50,16 +50,17 @@ "scheduler": "^0.23.0" | ||
"devDependencies": { | ||
"@types/chai": "^4.3.3", | ||
"@types/mocha": "^9.1.1", | ||
"@types/react": "18.0.21", | ||
"chai": "4.3.6", | ||
"konva": "^9.0.0", | ||
"@types/chai": "^4.3.5", | ||
"@types/mocha": "^10.0.1", | ||
"@types/react": "18.2.8", | ||
"chai": "4.3.7", | ||
"konva": "^9.1.0", | ||
"mocha-headless-chrome": "^4.0.0", | ||
"parcel": "^2.7.0", | ||
"parcel": "^2.9.1", | ||
"process": "^0.11.10", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"sinon": "^14.0.1", | ||
"typescript": "^4.8.4", | ||
"sinon": "^15.1.0", | ||
"timers-browserify": "^2.0.12", | ||
"typescript": "^5.1.3", | ||
"use-image": "^1.1.0", | ||
"util": "^0.12.4" | ||
"util": "^0.12.5" | ||
}, | ||
@@ -66,0 +67,0 @@ "scripts": { |
154
README.md
@@ -40,42 +40,33 @@ # React Konva | ||
class ColoredRect extends React.Component { | ||
state = { | ||
color: 'green', | ||
const ColoredRect = () => { | ||
const [color, setColor] = useState('green'); | ||
const handleClick = () => { | ||
setColor(Konva.Util.getRandomColor()); | ||
}; | ||
handleClick = () => { | ||
this.setState({ | ||
color: Konva.Util.getRandomColor(), | ||
}); | ||
}; | ||
render() { | ||
return ( | ||
<Rect | ||
x={20} | ||
y={20} | ||
width={50} | ||
height={50} | ||
fill={this.state.color} | ||
shadowBlur={5} | ||
onClick={this.handleClick} | ||
/> | ||
); | ||
} | ||
} | ||
class App extends Component { | ||
render() { | ||
// Stage is a div container | ||
// Layer is actual canvas element (so you may have several canvases in the stage) | ||
// And then we have canvas shapes inside the Layer | ||
return ( | ||
<Stage width={window.innerWidth} height={window.innerHeight}> | ||
<Layer> | ||
<Text text="Try click on rect" /> | ||
<ColoredRect /> | ||
</Layer> | ||
</Stage> | ||
); | ||
} | ||
} | ||
return ( | ||
<Rect | ||
x={20} | ||
y={20} | ||
width={50} | ||
height={50} | ||
fill={color} | ||
shadowBlur={5} | ||
onClick={handleClick} | ||
/> | ||
); | ||
}; | ||
const App = () => { | ||
return ( | ||
<Stage width={window.innerWidth} height={window.innerHeight}> | ||
<Layer> | ||
<Text text="Try click on rect" /> | ||
<ColoredRect /> | ||
</Layer> | ||
</Stage> | ||
); | ||
}; | ||
render(<App />, document.getElementById('root')); | ||
@@ -98,13 +89,14 @@ ``` | ||
```javascript | ||
class MyShape extends React.Component { | ||
componentDidMount() { | ||
import React, { useEffect, useRef } from 'react'; | ||
const MyShape = () => { | ||
const circleRef = useRef(); | ||
useEffect(() => { | ||
// log Konva.Circle instance | ||
console.log(this.circle); | ||
} | ||
render() { | ||
return ( | ||
<Circle ref={(ref) => (this.circle = ref)} radius={50} fill="black" /> | ||
); | ||
} | ||
} | ||
console.log(circleRef.current); | ||
}, []); | ||
return <Circle ref={circleRef} radius={50} fill="black" />; | ||
}; | ||
``` | ||
@@ -223,2 +215,66 @@ | ||
### Usage with Next.js | ||
Note: `react-konva` is designed to work in the client-side. On the server side, it will render just empty div. So it doesn't make much sense to use react-konva for server-side rendering. In Next.js you may have issue like | ||
> Module not found: Can't resolve 'canvas' | ||
Why do we see this error? `canvas` module is used for canvas rendering in Node.JS environment. `konva` library will use it there, but it doesn't have this dependency explicitly. | ||
You have two ways to resolve the issue: | ||
#### 1. Use dynamic loading | ||
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading | ||
Based on this comment: https://github.com/konvajs/react-konva/issues/588#issuecomment-892895335 | ||
With this approach your canvas application will be loaded on the client-side only. So you will not have any issues with server-side rendering. Also `next.js` will automatically understand that it doesn't need to load `canvas` module, because it is used for server-side rendering only. | ||
I would recommend to use this approach. | ||
You need to define your canvas components somewhere in your `components` folder. It shouldn't be inside `pages` or `app` folder (because they are used for server rendering). | ||
Your `components/canvas.js` file may look like this: | ||
```js | ||
'use client'; | ||
import { Stage, Layer, Circle } from 'react-konva'; | ||
function Canvas(props) { | ||
return ( | ||
<Stage width={window.innerWidth} height={window.innerHeight}> | ||
<Layer> | ||
<Circle x={200} y={100} radius={50} fill="green" /> | ||
</Layer> | ||
</Stage> | ||
); | ||
} | ||
export default Canvas; | ||
``` | ||
Then you can use it in your page like this: | ||
```js | ||
import dynamic from 'next/dynamic'; | ||
const Canvas = dynamic(() => import('../components/canvas'), { | ||
ssr: false, | ||
}); | ||
export default function Page(props) { | ||
return <Canvas />; | ||
} | ||
``` | ||
#### 2. Install `canvas` package manually | ||
To just ignore the error from Next.JS you can install `canvas` module manually: | ||
```bash | ||
npm install canvas | ||
``` | ||
Next.js will still try to load full canvas module on the server-side, but it will not fail. | ||
## Comparisons | ||
@@ -250,1 +306,5 @@ | ||
[http://konvajs.github.io/](http://konvajs.github.io/). Really, just go there and take a look what Konva can do for you. You will be able to do the same with `react-konva` too.** | ||
``` | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
63449
1188
307
15
Updatedits-fine@^1.1.1