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.

Enjoying Konva? Please consider to support the project.