tessl/npm-react-konva

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

—

Pending

Overview

Eval results

Files

Core Components

Name: tessl/npm-react-konva
Author: tessl

Foundation components for building canvas applications. These components provide the essential container hierarchy for organizing and managing canvas content with React Konva.

Capabilities

Stage Component

The root canvas container component that creates the HTML5 canvas element and initializes the Konva stage. This is the top-level component that must wrap all other React Konva components.

/**
 * Root canvas container component
 * Creates HTML5 canvas element and Konva stage
 */
var Stage: KonvaNodeComponent<Konva.Stage, StageProps>;

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

Usage Examples:

import React from 'react';
import { Stage, Layer } from 'react-konva';

// Basic stage setup
const App = () => {
  return (
    <Stage width={800} height={600}>
      <Layer>
        {/* Shape components go here */}
      </Layer>
    </Stage>
  );
};

// Stage with HTML attributes and styling
const StyledApp = () => {
  return (
    <Stage 
      width={800} 
      height={600}
      className="canvas-container"
      style={{ border: '1px solid #ccc' }}
      tabIndex={0}
    >
      <Layer>
        {/* Shape components go here */}
      </Layer>
    </Stage>
  );
};

// Stage with event handling
const InteractiveApp = () => {
  const handleStageClick = (e) => {
    console.log('Stage clicked at:', e.target.getStage().getPointerPosition());
  };

  return (
    <Stage width={800} height={600} onClick={handleStageClick}>
      <Layer>
        {/* Shape components go here */}
      </Layer>
    </Stage>
  );
};

Layer Component

Canvas layer component for organizing shapes into logical groups. Layers provide performance optimization by allowing selective redrawing and are essential containers for shape components.

/**
 * Canvas layer component for organizing shapes
 * Provides performance optimization through selective redrawing
 */
var Layer: KonvaNodeComponent<Konva.Layer, Konva.LayerConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Rect, Circle } from 'react-konva';

// Multiple layers for organization
const LayeredApp = () => {
  return (
    <Stage width={800} height={600}>
      <Layer name="background">
        <Rect width={800} height={600} fill="lightblue" />
      </Layer>
      <Layer name="shapes">
        <Circle x={100} y={100} radius={50} fill="red" />
        <Rect x={200} y={50} width={100} height={100} fill="green" />
      </Layer>
      <Layer name="ui">
        {/* UI elements that need frequent updates */}
      </Layer>
    </Stage>
  );
};

// Layer with opacity and visibility
const ConditionalLayer = () => {
  const [showLayer, setShowLayer] = React.useState(true);
  
  return (
    <Stage width={800} height={600}>
      <Layer visible={showLayer} opacity={0.8}>
        <Circle x={100} y={100} radius={50} fill="blue" />
      </Layer>
    </Stage>
  );
};

FastLayer Component

High-performance layer component optimized for scenarios with many shapes or frequent updates. FastLayer sacrifices some features for better rendering performance.

/**
 * High-performance layer component
 * Optimized for scenarios with many shapes or frequent updates
 */
var FastLayer: KonvaNodeComponent<Konva.FastLayer, Konva.LayerConfig>;

Usage Examples:

import React from 'react';
import { Stage, FastLayer, Circle } from 'react-konva';

// FastLayer for many animated objects
const PerformantAnimation = () => {
  const [circles, setCircles] = React.useState([]);

  React.useEffect(() => {
    // Generate many circles for performance testing
    const newCircles = Array.from({ length: 1000 }, (_, i) => ({
      id: i,
      x: Math.random() * 800,
      y: Math.random() * 600,
      radius: Math.random() * 20 + 5,
      color: `hsl(${Math.random() * 360}, 50%, 50%)`
    }));
    setCircles(newCircles);
  }, []);

  return (
    <Stage width={800} height={600}>
      <FastLayer>
        {circles.map(circle => (
          <Circle
            key={circle.id}
            x={circle.x}
            y={circle.y}
            radius={circle.radius}
            fill={circle.color}
          />
        ))}
      </FastLayer>
    </Stage>
  );
};

Group Component

Grouping container component for organizing shapes into logical collections. Groups can be transformed, styled, and managed as single units while maintaining individual shape properties.

/**
 * Grouping container for organizing shapes into logical collections
 * Allows collective transformation and management of multiple shapes
 */
var Group: KonvaNodeComponent<Konva.Group, Konva.GroupConfig>;

Usage Examples:

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

// Basic grouping
const GroupedShapes = () => {
  return (
    <Stage width={800} height={600}>
      <Layer>
        <Group x={100} y={100} draggable>
          <Rect width={100} height={100} fill="red" />
          <Circle x={50} y={50} radius={25} fill="blue" />
          <Text x={10} y={110} text="Grouped Items" fontSize={14} />
        </Group>
      </Layer>
    </Stage>
  );
};

// Group with transformations
const TransformedGroup = () => {
  const [rotation, setRotation] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setRotation(prev => prev + 1);
    }, 50);
    return () => clearInterval(interval);
  }, []);

  return (
    <Stage width={800} height={600}>
      <Layer>
        <Group 
          x={400} 
          y={300} 
          rotation={rotation}
          offsetX={50}
          offsetY={50}
        >
          <Rect x={0} y={0} width={100} height={100} fill="green" />
          <Circle x={50} y={50} radius={30} fill="yellow" />
        </Group>
      </Layer>
    </Stage>
  );
};

// Nested groups
const NestedGroups = () => {
  return (
    <Stage width={800} height={600}>
      <Layer>
        <Group x={50} y={50} name="main-group">
          <Group x={0} y={0} name="sub-group-1">
            <Rect width={50} height={50} fill="red" />
            <Circle x={25} y={25} radius={10} fill="white" />
          </Group>
          <Group x={100} y={0} name="sub-group-2">
            <Rect width={50} height={50} fill="blue" />
            <Circle x={25} y={25} radius={10} fill="white" />
          </Group>
        </Group>
      </Layer>
    </Stage>
  );
};

Label Component

Label container component for creating labeled elements, typically used in combination with Tag and Text components for callouts, tooltips, and annotations.

/**
 * Label container for creating labeled elements
 * Typically used with Tag and Text components for callouts and annotations
 */
var Label: KonvaNodeComponent<Konva.Label, Konva.LabelConfig>;

Usage Examples:

import React from 'react';
import { Stage, Layer, Label, Tag, Text, Circle } from 'react-konva';

// Label with tag and text
const LabelExample = () => {
  return (
    <Stage width={800} height={600}>
      <Layer>
        <Circle x={200} y={200} radius={50} fill="red" />
        
        <Label x={200} y={120}>
          <Tag
            fill="black"
            pointerDirection="down"
            pointerWidth={10}
            pointerHeight={10}
            lineJoin="round"
            shadowColor="black"
            shadowBlur={10}
            shadowOffsetX={3}
            shadowOffsetY={3}
            shadowOpacity={0.3}
          />
          <Text
            text="This is a circle"
            fontFamily="Calibri"
            fontSize={18}
            padding={5}
            fill="white"
          />
        </Label>
      </Layer>
    </Stage>
  );
};

// Interactive tooltip label
const TooltipLabel = () => {
  const [showTooltip, setShowTooltip] = React.useState(false);
  const [tooltipPos, setTooltipPos] = React.useState({ x: 0, y: 0 });

  const handleMouseEnter = (e) => {
    setShowTooltip(true);
    setTooltipPos({
      x: e.target.x(),
      y: e.target.y() - 60
    });
  };

  return (
    <Stage width={800} height={600}>
      <Layer>
        <Circle 
          x={200} 
          y={200} 
          radius={50} 
          fill="blue"
          onMouseEnter={handleMouseEnter}
          onMouseLeave={() => setShowTooltip(false)}
        />
        
        {showTooltip && (
          <Label x={tooltipPos.x} y={tooltipPos.y}>
            <Tag fill="yellow" cornerRadius={5} />
            <Text text="Hover tooltip" fontSize={14} padding={5} />
          </Label>
        )}
      </Layer>
    </Stage>
  );
};

Install with Tessl CLI