How to access Konva nodes from react-konva?

In some cases you may need to use the Konva API directly. For example for exporting canvases or animations.

There are two ways to access Konva nodes/shapes from react-konva.

Using the refs API.

You can use the refs API to get access to a Konva node.

import { Circle } from 'react-konva';
const App = () => {
const shapeRef = React.useRef(null);
React.useEffect(() => {
// it will log `Konva.Circle` instance
return <Circle ref={shapeRef} />;

Using an event object inside of the event callback

Another common way to access a Konva node is to just use an event object that you have as an argument in any event:

import { Circle } from 'react-konva';
const App = () => {
const handleClick = (e) => {
// logs clicked Konva.Circle instance
return <Circle onClick={handleClick} />;
Enjoying Konva? Please consider to support the project.