tessl/npm-react-art

React ART is a JavaScript library for drawing vector graphics using React

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Core Components

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

Essential building blocks for creating vector graphics with React ART, including the Surface container, basic shapes, text rendering, and grouping functionality.

Capabilities

Surface Component

The root container component that creates the ART rendering surface. All React ART graphics must be rendered within a Surface component.

/**
 * Root container component for ART graphics
 * Creates the rendering surface (Canvas/SVG/VML based on environment)
 * @param props - Surface configuration
 * @returns JSX.Element
 */
function Surface(props: {
  /** Width of the surface in pixels */
  width: number;
  /** Height of the surface in pixels */
  height: number;
  /** CSS style object */
  style?: object;
  /** CSS class name */
  className?: string;
  /** Accessibility key */
  accessKey?: string;
  /** Whether element is draggable */
  draggable?: boolean;
  /** ARIA role */
  role?: string;
  /** Tab index for keyboard navigation */
  tabIndex?: number;
  /** Title attribute */
  title?: string;
  /** Child React ART components */
  children?: React.ReactNode;
}): JSX.Element;

Usage Examples:

import React from 'react';
import { Surface, Shape, Path } from 'react-art';

// Basic surface
function BasicDrawing() {
  return (
    <Surface width={300} height={200}>
      {/* Your graphics here */}
    </Surface>
  );
}

// Surface with styling
function StyledDrawing() {
  return (
    <Surface 
      width={400} 
      height={300}
      style={{ border: '1px solid #ccc', margin: '10px' }}
      className="my-drawing"
    >
      {/* Your graphics here */}
    </Surface>
  );
}

Shape Component

Basic vector shape component that renders custom paths. This is the fundamental building block for all vector graphics in React ART.

/**
 * Basic vector shape component
 * Renders a vector path with optional styling
 * @param props - Shape configuration and styling
 * @returns JSX.Element
 */
function Shape(props: {
  /** Path data defining the shape geometry */
  d: Path;
  /** Fill color (string) or fill object (gradient/pattern) */
  fill?: string | FillObject;
  /** Stroke color */
  stroke?: string;
  /** Stroke width in pixels */
  strokeWidth?: number;
  /** Stroke dash pattern */
  strokeDash?: number[];
  /** Stroke line cap style */
  strokeCap?: 'butt' | 'round' | 'square';
  /** Stroke line join style */
  strokeJoin?: 'miter' | 'round' | 'bevel';
  /** Opacity (0-1) */
  opacity?: number;
}): JSX.Element;

Usage Examples:

import { Surface, Shape, Path } from 'react-art';

// Custom triangle shape
function Triangle() {
  const trianglePath = Path()
    .moveTo(50, 0)
    .lineTo(100, 100)
    .lineTo(0, 100)
    .close();

  return (
    <Surface width={100} height={100}>
      <Shape 
        d={trianglePath} 
        fill="red" 
        stroke="black" 
        strokeWidth={2} 
      />
    </Surface>
  );
}

// Complex path with styling
function StyledShape() {
  const path = Path()
    .moveTo(10, 10)
    .lineTo(90, 10)
    .arc(0, 80, 10)
    .lineTo(10, 90)
    .arc(0, -80, 10)
    .close();

  return (
    <Surface width={100} height={100}>
      <Shape 
        d={path}
        fill="blue"
        stroke="darkblue"
        strokeWidth={3}
        strokeCap="round"
        strokeJoin="round"
        opacity={0.8}
      />
    </Surface>
  );
}

Group Component

Container component for grouping multiple shapes together. Groups can be used to apply transformations to multiple elements or organize graphics hierarchically.

/**
 * Container for grouping multiple shapes
 * Allows applying transformations and styling to multiple children
 * @param props - Group configuration
 * @returns JSX.Element
 */
function Group(props: {
  /** Child React ART components */
  children?: React.ReactNode;
  /** Opacity applied to all children (0-1) */
  opacity?: number;
  /** Transform object for scaling, rotation, translation */
  transform?: Transform;
}): JSX.Element;

Usage Examples:

import { Surface, Group, Shape, Path } from 'react-art';

// Grouping multiple shapes
function GroupedShapes() {
  const circle = Path().moveTo(0, 10).arc(20, 0, 10).arc(-20, 0, 10).close();
  const square = Path().moveTo(30, 0).lineTo(50, 0).lineTo(50, 20).lineTo(30, 20).close();

  return (
    <Surface width={100} height={50}>
      <Group opacity={0.7}>
        <Shape d={circle} fill="red" />
        <Shape d={square} fill="blue" />
      </Group>
    </Surface>
  );
}

Text Component

Component for rendering text within ART graphics. Provides access to text metrics and positioning.

/**
 * Text rendering component
 * Renders text with optional styling and exposes metrics
 * @param props - Text configuration and styling
 * @returns JSX.Element
 */
function Text(props: {
  /** Text content to render */
  children: string;
  /** Font family */
  font?: string;
  /** Font size in pixels */
  fontSize?: number;
  /** Font weight */
  fontWeight?: string | number;
  /** Font style */
  fontStyle?: 'normal' | 'italic';
  /** Text alignment */
  alignment?: string;
  /** Text fill color */
  fill?: string;
  /** Text stroke color */
  stroke?: string;
  /** Text stroke width */
  strokeWidth?: number;
}): JSX.Element;

// Text component instance properties (accessible via ref)
interface TextInstance {
  /** Computed text height */
  height: number;
  /** Computed text width */
  width: number;
  /** Text x position */
  x: number;
  /** Text y position */
  y: number;
}

Usage Examples:

import React, { useRef, useEffect } from 'react';
import { Surface, Text } from 'react-art';

// Basic text rendering
function BasicText() {
  return (
    <Surface width={200} height={100}>
      <Text font="Arial" fontSize={16} fill="black">
        Hello, React ART!
      </Text>
    </Surface>
  );
}

// Text with metrics access
function TextWithMetrics() {
  const textRef = useRef(null);

  useEffect(() => {
    if (textRef.current) {
      console.log('Text dimensions:', {
        width: textRef.current.width,
        height: textRef.current.height
      });
    }
  }, []);

  return (
    <Surface width={300} height={100}>
      <Text 
        ref={textRef}
        font="Arial" 
        fontSize={20} 
        fontWeight="bold"
        fill="darkblue"
      >
        Measured Text
      </Text>
    </Surface>
  );
}

ClippingRectangle Component

Component for defining clipping regions to mask graphics content.

/**
 * Clipping rectangle component
 * Defines a rectangular clipping region for child elements
 * @param props - Clipping configuration
 * @returns JSX.Element
 */
function ClippingRectangle(props: {
  /** Width of clipping rectangle */
  width: number;
  /** Height of clipping rectangle */
  height: number;
  /** X position of clipping rectangle */
  x?: number;
  /** Y position of clipping rectangle */
  y?: number;
  /** Child components to be clipped */
  children?: React.ReactNode;
}): JSX.Element;

Usage Examples:

import { Surface, ClippingRectangle, Shape, Path } from 'react-art';

// Clipping a large shape
function ClippedShape() {
  const largePath = Path()
    .moveTo(0, 0)
    .lineTo(200, 0)
    .lineTo(200, 200)
    .lineTo(0, 200)
    .close();

  return (
    <Surface width={100} height={100}>
      <ClippingRectangle width={50} height={50}>
        <Shape d={largePath} fill="green" />
      </ClippingRectangle>
    </Surface>
  );
}

Types

// Fill object union type
type FillObject = LinearGradient | RadialGradient | Pattern;

// Transform class from ART library
class Transform {
  // Matrix transformation methods
}

// Path class from ART library
class Path {
  moveTo(x: number, y: number): Path;
  lineTo(x: number, y: number): Path;
  arc(x: number, y: number, radius: number): Path;
  close(): Path;
}

Install with Tessl CLI