React-konva-utils NPM

Useful components and hooks for react-konva apps.

Html

Html components allows you to create DOM components inside Konva stage. All DOM components will be placed over canvas content.

import { Html } from 'react-konva-utils';

<Html
  transform // should we apply position transform automatically to DOM container, default is true
  transformFunc={(transformAttrs) => newAttrs} // function to overwrite transformation attributes, not used if transform = false, default is undefined
  groupProps={{}} // additional properties to the group wrapper, useful for some position offset
  divProps={{}} // additional props for wrapped div elements, useful for styles
>
  <div>DOM content</div>
</Html>;

Portal

Portal allows you to create portal from one Konva container (such as Layer or Group) into another.

import { Portal } from 'react-konva-utils';

<Layer>
  <Portal selector=".top">
    {/* content of that portal will be moved into "top" group*/}
    <Rect width={100} height={100} fill="red" draggable />
  </Portal>
  <Rect width={100} height={100} fill="black" draggable />
  <Group name="top" />
</Layer>;

react canvas konva react-konva

react-konva use-image