Usage of zIndex property

In pure Konva framework, we have zIndex property. It is very useful to change order of elements with that property:

node.setZIndex(2);

In react-konva the order of elements will be defined as it is defined in render() function of a component:

// Rect will have zIndex = 0
// Circle will have zIndex = 1
const Component = () =>
   <Group>
     <Rect>
     <Circle>
   <Group>


// Rect will have zIndex = 1
// Circle will have zIndex = 0
const Component2 = () =>
   <Group>
     <Circle>
     <Rect>
   <Group>

We may have unexpected result if we will use two logics of ordering at the same time:

const Component = () =>
   <Group>
     <Rect zIndex={1}>
     <Circle>
   <Group>

So my suggestion is to NOT use zIndex attrube in react-konva. Just reorder nodes in render().

[lavrton]

No, we don’t need to rever the order from react-konva side. If you need to revert it, you can do it manually from your render() function.

[lavrton]

https://konvajs.org/docs/react/zIndex.html