Skip to content

Handling text in React Konva

Pablo Marzal edited this page Aug 13, 2024 · 1 revision

Handling text in React Konva

We can see all the text properties in Konva in its documentation.

Centering text

If we need to work with the alignment of the text we can use the align property which can be: left, center, or right.

align="center"

center-text-konva

Clipping text

When the text no longer fit in our component we will use the ellipsis property: Can be true or false. Default is false.

If Konva Text config is set to:

  • ellipsis={true}
  • and wrap="none"

then it will add "..." to the end

text-ellipsis

Both examples can be found in component: button-shape.tsx