or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-components.mdindex.mdinteractions.mdshapes.mdutilities.md
tile.json

tessl/npm-react-konva

React binding to canvas element via Konva framework providing declarative and reactive canvas graphics.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-konva@19.0.x

To install, run

npx @tessl/cli install tessl/npm-react-konva@19.0.0

index.mddocs/

React Konva

React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework, enabling developers to create high-performance 2D canvas applications with familiar React components and patterns.

Package Information

  • Package Name: react-konva
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-konva konva --save

Core Imports

import { Stage, Layer, Rect, Circle, Text, Group } from "react-konva";

For CommonJS:

const { Stage, Layer, Rect, Circle, Text, Group } = require("react-konva");

Basic Usage

import React, { useState } from 'react';
import { render } from 'react-dom';
import { Stage, Layer, Rect, Text } from 'react-konva';
import Konva from 'konva';

const ColoredRect = () => {
  const [color, setColor] = useState('green');

  const handleClick = () => {
    setColor(Konva.Util.getRandomColor());
  };

  return (
    <Rect
      x={20}
      y={20}
      width={50}
      height={50}
      fill={color}
      shadowBlur={5}
      onClick={handleClick}
    />
  );
};

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="Try click on rect" />
        <ColoredRect />
      </Layer>
    </Stage>
  );
};

render(<App />, document.getElementById('root'));

Architecture

React Konva is built around several key components:

  • React Reconciler Integration: Uses react-reconciler to bridge React's virtual DOM with Konva's canvas nodes
  • Component Hierarchy: Stage (root) → Layer → Shape components, following Konva's node structure
  • Event System: Comprehensive event handling mapped from Konva events to React props (onClick, onDragMove, etc.)
  • Performance Optimization: FastLayer for high-performance rendering, batched updates for canvas drawing
  • TypeScript Support: Full type definitions with generic component interfaces
  • Ref Support: Access to underlying Konva instances through React refs

Capabilities

Core Components

Foundation components for building canvas applications, including the root Stage container, organizational layers, and grouping mechanisms.

// Root canvas container
var Stage: KonvaNodeComponent<Konva.Stage, StageProps>;

// Layer for organizing shapes
var Layer: KonvaNodeComponent<Konva.Layer, Konva.LayerConfig>;

// High-performance layer
var FastLayer: KonvaNodeComponent<Konva.FastLayer, Konva.LayerConfig>;

// Grouping container
var Group: KonvaNodeComponent<Konva.Group, Konva.GroupConfig>;

interface StageProps extends Konva.NodeConfig, KonvaNodeEvents {
  className?: string;
  role?: string;
  style?: React.CSSProperties;
  tabIndex?: number;
  title?: string;
}

Core Components

Shape Components

Complete set of 2D shape components for creating graphics, from basic primitives like rectangles and circles to complex shapes like paths and custom shapes.

// Basic shapes
var Rect: KonvaNodeComponent<Konva.Rect, Konva.RectConfig>;
var Circle: KonvaNodeComponent<Konva.Circle, Konva.CircleConfig>;
var Ellipse: KonvaNodeComponent<Konva.Ellipse, Konva.EllipseConfig>;

// Text rendering
var Text: KonvaNodeComponent<Konva.Text, Konva.TextConfig>;
var TextPath: KonvaNodeComponent<Konva.TextPath, Konva.TextPathConfig>;

// Complex shapes
var Line: KonvaNodeComponent<Konva.Line, Konva.LineConfig>;
var Path: KonvaNodeComponent<Konva.Path, Konva.PathConfig>;
var Shape: KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig>;

Shape Components

Event Handling and Interactions

Comprehensive event system supporting mouse, touch, pointer, and drag events with interactive transformation capabilities.

interface KonvaNodeEvents {
  // Mouse events
  onMouseOver?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onMouseMove?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  
  // Touch events
  onTouchStart?(evt: Konva.KonvaEventObject<TouchEvent>): void;
  onTouchMove?(evt: Konva.KonvaEventObject<TouchEvent>): void;
  
  // Drag events
  onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
  onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;
  onDragEnd?(evt: Konva.KonvaEventObject<DragEvent>): void;
}

// Interactive transformation component
var Transformer: KonvaNodeComponent<Konva.Transformer, Konva.TransformerConfig>;

Event Handling and Interactions

Utility Functions

Configuration and utility functions for customizing behavior, accessing the reconciler, and managing strict mode updates.

// Strict mode configuration
var useStrictMode: (useStrictMode: boolean) => void;

// React reconciler instance
var KonvaRenderer: ReactReconciler.Reconciler<any, any, any, any, any, any>;

// Library version
var version: string;

Utility Functions

Types

// Generic component interface for all Konva nodes
interface KonvaNodeComponent<
  Node extends Konva.Node,
  Props = Konva.NodeConfig
> extends React.FC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
  getPublicInstance(): Node;
  getNativeNode(): Node;
}

// Comprehensive event interface
interface KonvaNodeEvents {
  // Mouse events
  onMouseOver?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onMouseMove?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onMouseOut?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onMouseEnter?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onMouseLeave?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onMouseDown?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onMouseUp?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onWheel?(evt: Konva.KonvaEventObject<WheelEvent>): void;
  onClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  onDblClick?(evt: Konva.KonvaEventObject<MouseEvent>): void;
  
  // Touch events
  onTouchStart?(evt: Konva.KonvaEventObject<TouchEvent>): void;
  onTouchMove?(evt: Konva.KonvaEventObject<TouchEvent>): void;
  onTouchEnd?(evt: Konva.KonvaEventObject<TouchEvent>): void;
  onTap?(evt: Konva.KonvaEventObject<Event>): void;
  onDblTap?(evt: Konva.KonvaEventObject<Event>): void;
  
  // Drag events
  onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
  onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;
  onDragEnd?(evt: Konva.KonvaEventObject<DragEvent>): void;
  
  // Transform events
  onTransform?(evt: Konva.KonvaEventObject<Event>): void;
  onTransformStart?(evt: Konva.KonvaEventObject<Event>): void;
  onTransformEnd?(evt: Konva.KonvaEventObject<Event>): void;
  
  // Pointer events
  onPointerDown?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerMove?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerUp?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerCancel?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerEnter?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerLeave?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerOver?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerOut?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onPointerDblClick?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onGotPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  onLostPointerCapture?(evt: Konva.KonvaEventObject<PointerEvent>): void;
  
  // Context menu
  onContextMenu?(evt: Konva.KonvaEventObject<PointerEvent>): void;
}

// Stage-specific props interface
interface StageProps extends Konva.NodeConfig, KonvaNodeEvents, Pick<
  React.HTMLAttributes<HTMLDivElement>,
  'className' | 'role' | 'style' | 'tabIndex' | 'title'
> {}