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
    console.log(shapeRef.current);
  });
  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
    console.log(e.target);
  }
  return <Circle onClick={handleClick} />;
}
Enjoying Konva? Please consider to support the project.