CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-konva

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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'
> {}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-konva@19.0.x
Publish Source
CLI
Badge
tessl/npm-react-konva badge