How to use portals in react-konva?

How does react-konva control the zIndex?

react-konva strictly follows the order of elements in the way that you define them in your render. For more info take a look into the zIndex demo.

Is it possible to move a node into another container with react-konva?

Currently react-konva doesn't support the React.createPortal API.

But we can use <Portal /> component from react-konva-utils package

Such a portal can be useful when you want to temporarily move a node into another container. The common use cases are:

1. Move a dragging shape into another layer for better performance
2. Show an element on top of other elements, but still keep it deep down in the components tree

Instructions: try to drag a rectangle. You will see that it is visible on top, but in render it is still the first element.

import React from 'react';
import { Stage, Layer, Rect, Text, Circle, Line } from 'react-konva';
import { Portal } from 'react-konva-utils';

const App = () => {
  const [isDragging, setDragging] = React.useState(false);
  const [rectanglePosition, setRectanglePosition] = React.useState({
    x: 20,
    y: 50,
  });
  const [linePosition, setLinePosition] = React.useState({ x: 20, y: 200 });

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          text="The rectangle moves to the top layer while you drag it."
          fontSize={15}
        />
        <Portal selector=".top-layer" enabled={isDragging}>
          <Rect
            x={rectanglePosition.x}
            y={rectanglePosition.y}
            width={150}
            height={150}
            fill="red"
            draggable={true}
            onDragStart={() => {
              setDragging(true);
            }}
            onDragEnd={(event) => {
              setRectanglePosition(event.target.position());
              setDragging(false);
            }}
          />
        </Portal>
        <Circle x={200} y={100} radius={50} fill="green" />
        <Line
          x={linePosition.x}
          y={linePosition.y}
          points={[0, 0, 100, 0, 100, 100]}
          tension={0.5}
          closed
          stroke="black"
          fillLinearGradientStartPoint={{ x: -50, y: -50 }}
          fillLinearGradientEndPoint={{ x: 50, y: 50 }}
          fillLinearGradientColorStops={[0, 'red', 1, 'yellow']}
          draggable
          onDragEnd={(event) => {
            setLinePosition(event.target.position());
          }}
        />
      </Layer>
      <Layer name="top-layer" />
    </Stage>
  );
};

export default App;