Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-konva

Package Overview
Dependencies
Maintainers
1
Versions
128
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-konva - npm Package Compare versions

Comparing version 18.2.8 to 18.2.9

11

es/ReactKonvaCore.js

@@ -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 @@ }

23

package.json

@@ -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": {

@@ -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.**
```
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc